Primer CSS truncate custom max-width-CSS Tutorial-php.cn

Primer CSS truncate custom max-width

WBOY

Release： 2023-08-29 16:41:02

forward

673 people have browsed it

底漆 CSS 截断自定义最大宽度

In web development projects, developers will encounter situations where text needs to be displayed in a designated space due to various reasons such as customer needs, overall appearance, limited resources, etc. ## The #truncate attribute is an effective feature in CSS that can solve this problem.

It enables developers to display a single line of text and truncate overflowing text with ellipses. However, depending on the situation, it may be necessary to customize the maximum width of the truncated text. In this article, we’ll discuss how to customize the maximum width using Primer CSS, a popular open source CSS framework designed by GitHub Design Systems.

What does truncation mean?

In web design,

truncate is one of the values of the CSS text-overflow property. When working with text, we often encounter situations where the container is not large enough to hold the text. This kind of text is called overflow text. It allows us to display a line of text and then truncate the rest with an ellipsis.

In CSS, in order to use

"truncate", you must perform the following steps -

Set the
"white-space" attribute to nowrap
Set the
overflow property to hide
Set the
text-overflow property to ellipsis

Example

<html>
<head>
   <style>
      div {
         width: 77%;
         height: 30px;
         border: 1px solid black;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
      }      
   </style>
</head>  
<body> 
   <div> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </div>
</body> 
</html>

Copy after login

To avoid so many lines of code, you can use Primer CSS instead. Primer CSS has a built-in truncation component. It has the same predefined classes.

Before using any class in Primer CSS, we must install it from npm -

npm install --save @primer/css

Copy after login

Or use CDN link in HTML code -

<link href= "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel= "stylesheet" />

Copy after login

Customize the maximum width of truncated text

In order to customize the maximum width of truncated text, Primer CSS provides predefined classes for truncating overflowing text in websites.

Example

In this example, we use the predefined box class to convert a div element into a resizable box. Here,

p-1 is a class shorthand for adding 4px (0.25 rem) of padding on all sides of the box.

Next, we have the style attribute which is used to add the desired style to the box. We set the value of the

resize property to horizontal so that the user can resize the box horizontally simply by dragging it from the right corner. To add a horizontal scrollbar to an element, we use the "overflow:scroll" attribute. Using horizontal scroll bars will allow users to see hidden content when scrolling text horizontally.

We then use predefined classes in Primer CSS to display different truncated text with different maximum widths.

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
   <h1 style="margin: 10px"> Primer CSS Truncate Custom Max Width </h1>
   <p style="margin: 10px"> Following we have different truncated text with customized maximum widths. </p>
   <br>
   <div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 460px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
      <br>
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 340px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
      <br>
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 280px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
      <br>
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 180px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
      <br>
      <div class="Truncate">
         <span class="Truncate-text Truncate-text--expandable" style="max-width: 80px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
      </div>
   </div>
</body>
</html>

Copy after login

in conclusion

Customizing the maximum width of displayed text in case of overflow content is a good practice and can help developers control the display of text within limited space on the website. By following the methods discussed in this article, you will be able to create a visually appealing website. We can also use truncation methods in card design. This makes your content more readable and user-friendly while you have to display long titles, headings, card descriptions, etc.

The above is the detailed content of Primer CSS truncate custom max-width. For more information, please follow other related articles on the PHP Chinese website!