Set text length limit to N lines using CSS-CSS Tutorial-php.cn

Set text length limit to N lines using CSS

王林

Release： 2023-08-27 13:29:08

forward

1328 people have browsed it

使用 CSS 将文本长度限制设置为 N 行

Sometimes, developers need to truncate text according to the size of HTML elements. For example, the width of the div element is 100px and it can only hold some characters. Therefore, we need to use CSS to truncate the text.

However, we can use JavaScript to truncate the text, but this may cause problems. For example, we can display 18 characters in 100px, but sometimes less characters may be displayed due to capitalization of characters. In this case, if we display 18 characters, it may overflow.

So, using CSS to truncate text is a better idea.

grammar

Users can set the text limit to N lines using CSS using the following syntax.

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Copy after login

In the above syntax, we set overflow to hide, 'text-overflow: elipsis' to truncate the text. The value of the "-webkit-line-clamp" property shows the number of lines to display.

Example 1

In the example below, we only display one line of text. We will truncate the other text. We set 300px as the width of the div element, hidden as overflow, and ellipsis as the text-overflow attribute. Additionally, we use the "white-space" attribute and the "no-wrap" value to display text only in a single line.

<html>
<head>
   <style>
      div {
         height: auto;
         width: 300px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         background-color: red;
         color: white;
         padding: 10px;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to 1 line using CSS</h2>
   <div>This is a div containing multiple lines of text. The text visibility is limited to 1 line only.</div>
</body>
</html>

Copy after login

The Chinese translation of

Example 2

is:

Example 2

In the example below, we show N lines of truncated text. We added text to the div element like in the first example. After that, we used the “webkit-line-clamp” CSS property to set the number of lines instead of using the “white-space: no-wrap” CSS property.

In the output, the user can observe that it only displays three lines of truncated text. The user can change the number of lines and observe the output.

<html>
<head>
   <style>
      div {
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         line-height: 20px;
         max-height: 100px;
         padding: 4px 10px;
         max-width: 400px;
         background-color: aqua;
         -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h3>Limiting the text length to N line using CSS</h3>
   <div>Git is a popular version control system used to track changes in code or other files. It allows multiple
      developers to work on the same project simultaneously, without overwriting each other's changes. Git uses a
      distributed architecture, which means that each developer has their own local copy of the repository, and
      changes can be easily merged together.</div>
</body>
</html>

Copy after login

The Chinese translation of

Example 3

is:

Example 3

In the following example, we will demonstrate the real-time use of truncating text to N lines. Here we have created a card component using HTML and CSS. We added an image to the left side of the card and text to the right. Additionally, the width of the card is fixed.

We need to display text on the right side of the card without letting the text overflow. We truncate the text to 4 lines, which can be seen in the output.

<html>
<head>
   <style>
      .card {
         background-color: grey;
         width: 400px;
         height: 80px;
         display: flex;
         border-radius: 12px;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         text-align: left;
         justify-content: center;
      }
      .img {
         width: 130px;
         height: 70px;
         margin-right: 30px;
         padding: 5px;
      }
      img {
         width: 100%;
         height: 100%;
      }
      .content {
         width: 450px;
         height: 70px;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 4;
         -webkit-box-orient: vertical;
      }
   </style>
</head>
<body>
   <h2>Limiting the text length to N line using CSS</h3>
   <div class = "card">
      <div class = "img">
         <img src = "https://img.freepik.com/free-photo/grunge-paint-background_1409-1337.jpg" alt = "img">
      </div>
      <div class = "content">
         This is an information about the image. Whatever text will fit to the div, it will be shown. If the text is
         more than the div, then it will be hidden and the text will be shown as ellipsis.
      </div>
   </div>
</body>
</html>

Copy after login

Users learned to truncate text into multiple lines. We can truncate text using the ‘overflow:hidden’ and ‘text-overflow:elipsis’ CSS properties. Additionally, we need to use "white-space: no-wrap" to truncate a single line of text, and use the "webkit-line-clamp:lines" CSS property to truncate text into multiple lines.

The above is the detailed content of Set text length limit to N lines using CSS. For more information, please follow other related articles on the PHP Chinese website!