Overflow of single-line text displays ellipses (...)
Text-overflow:ellipsis;3 White-space:nowrap;
However, this property does not support multiple lines of text overflow display ellipsis, here according to the application scenario describes several methods.
WebKit a browser or mobile page
In WebKit browser or mobile (most of the WebKit kernel browser) page implementation is relatively simple, you can directly use the WebKit CSS extension properties (WebKit is a private property) -webkit-line-clamp
; Note: This is a non-canonical attribute (unsupported WebKit property), which does not appear in the draft CSS specification.
-webkit-line-clamp
The number of lines used to limit the text displayed in a block element. To achieve this effect, it needs to combine other WebKit properties.
Common binding Properties:
display: -webkit-box;
You must combine the properties to display the object as an elastic telescopic box model.
-webkit-box-orient
You must combine properties to set or retrieve the arrangement of child elements of a telescopic box object.
text-overflow: ellipsis;
, you can use the ellipsis "..." to hide out-of-range text in the case of multiple lines of text.
1 overflow:hidden;2 text-overflow:ellipsis;3 display:-webkit-box;4-webkit-line-clamp:2; /* control line number */5-webkit-box-orient:vertical;
This property is more suitable for browsers WebKit browsers or mobile (mostly WebKit cores).
Multiple lines of text overflow display ellipsis