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

Home

Web Front-end

CSS Tutorial

Primer CSS truncate custom max-width

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 29, 2023 pm 04:41 PM

底漆 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>

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

Or use CDN link in HTML code -

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

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 id="Primer-CSS-Truncate-Custom-Max-Width"> 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>

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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Comparing the 5 Best PHP Form Builders (And 3 Free Scripts)Mar 04, 2025 am 10:22 AM

This article explores the top PHP form builder scripts available on Envato Market, comparing their features, flexibility, and design. Before diving into specific options, let's understand what a PHP form builder is and why you'd use one. A PHP form

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

See all articles