Multiline text overflow shows ellipsis

The implementation of pages in WebKit browsers or mobile terminals (most of which are browsers with the WebKit core) is relatively simple, and you can directly use WebKit's CSS extension properties (WebKit is a private property) -webkit-line-clamp ; Note: This is an unstandardized property ( unsupported WebKit property ), which does not appear in the draft CSS specification.

-webkit-line-clampUsed to limit the number of lines of text displayed in a block element. To achieve this effect, it needs to combine other WebKit properties.
Common binding properties:

display: -webkit-box; Properties that must be combined to display the object as an elastically scalable box model.

-webkit-box-orient A property that must be combined to set or retrieve the arrangement of the child elements of the flexbox object.

text-overflow: ellipsis;, which can be used to hide out-of-range text with an ellipsis "..." in the case of multi-line text.

 

Code example:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //here is an ellipsis on the second line
overflow: hidden;