What is the line-clamp property of css? how to use?

The content of this article is to introduce to you what is the line-clamp attribute of CSS? how to use? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s understand what the line-clamp attribute is?

The line-clamp attribute can limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other foreign WebKit attributes and added with the -WebKit- prefix.

The line-clamp attribute is an unsupported WebKit property. It does not appear in the CSS specification draft and is a draft that is being edited. So this means that the line-clamp property is not set in stone as it is a work in progress. The definition of line-clamp attribute can be divided into max-lines and block-overflow, of which the former has the risk of being discarded. [Recommended video learning: css3 tutorial]

It is easy to see how max-lines is disabled, because the function of line-clamp (setting the number of lines before truncation) has been implemented , making further truncation unnecessary. This will take us off track, so let's move on.

Next let’s see how the line-clamp attribute is used?

Basic Syntax

.module {
  line-clamp: [none | <integer>];
}

line-clamp The following values ​​are accepted in the current draft of the specification:

none: No maximum value is set on the number of lines, so No truncation occurs.

: Sets the maximum number of lines before truncating content, then displays an ellipsis (...) at the end of the last line.

The ellipsis should be rendered as a Unicode character (U 2026), but may be replaced by an equivalent based on the content language and writing mode of the user agent used.

Then someone may ask, can't we use the text-overflow attribute (text overflow) to intercept text?

text-overflow does have a value that will truncate the text: ellipsis, let’s take a look at the effect

css code:

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

It can be seen that text-overflow can intercept text, but it introduces ellipses in the first line; what if we want to intercept text somewhere, such as the third line of text?

This is where line-clamp comes into play.

Let’s take a look at the compatibility of the line-clamp attribute

For those who cannot With supported browsers, we can use JavaScript to achieve the effect.

JavaScript code, Clamp.js download address: https://github.com/josephschmitt/Clamp.js

Summary: That’s it for this article The entire content of the article is hoped to be helpful to everyone's study.

The above is the detailed content of What is the line-clamp property of css? how to use?. For more information, please follow other related articles on the PHP Chinese website!