First, there are two scenarios in which the analysis goes beyond the content, and the single-line content exceeds and the multiline content is exceeded, as described below:
Single-line content operations:
Single-line operations must have a width property, that is, the element must have a width and height limit can be, with the above basic conditions, write the following code
Overflow:hidden;
Text-overflow:ellipsis;
White-space:nowrap;
At this point, you can see that the single line of text exceeds the display ellipsis.
Multi-line content operations:
Multiple lines of text beyond the early ellipsis is not the way to do this, this article uses CSS3 to WebKit extension, it should be noted that this method is only applicable to WebKit browser and mobile page.
The following are key code snippets:
< Span class= "PLN" >< Span class= "PLN" >< Span class= "PLN" >< Span class= "PLN" >< Span class= "PLN" >overflow: hidden
Display: -webkit-box
-webkit-line-clamp : 5
-webkit-box-Orient: vertical;
At this point, you can see that multiple lines of text are out of the display ellipsis.
Simple explanation:
First set the element as the elastic box model, which is Display:box, then set the number of lines that limit the text, use the Line-clamp property, and finally set the arrangement of the Elastic Box contents box-orient, don't forget you also need to add more than the hidden property settings overflow : hidden.
above is the way to set the ellipsis for text content that is out of the CSS!
The text content outside the CSS displays an ellipsis