CSS control long text content display (truncated place with ellipses instead)

Word wrap problem, normal character line wrapping is more reasonable, and continuous numbers and English characters will often support the container, the following is how CSS to implement the method of processing.

In reality, some long text appears, in order to make the overall layout beautiful, you need to control the text content on a line to display, and intercept a certain length, the interception of the place with an ellipsis instead. Although the dynamic language can be controlled, but this is not conducive to search engine collection, the use of CSS can skillfully solve the problem, see the following code:
Code one: For non-tabular li or span, etc. can be

Www.169it.com

. text-overflow {
display:block;/* inline objects need to be added */
Width:31em;
word-break:keep-all;/* does not change the line */
white-space:nowrap;/* No line break */ 
overflow:hidden;/* content hidden beyond the width */ 
text-overflow:ellipsis;/* displays an ellipsis (...) when the text inside the object overflows; To be used in conjunction with Overflow:hidden; */ 
< Span class= "Textrun SCX26996116" >}

Code two: for tables

table{
Width:30em;
table-layout:fixed;/* only the table-defined layout algorithm is fixed, the following TD definition will work. */

}

rd=
width:100%;
word-break:keep-all;/* Non-newline */ 
white-space:nowrap;/* No Line break */ 
< Span class= "Normaltextrun SCX26996116" >overflow:hidden;/* content is hidden beyond the width when the content is out of bounds */ 
< Span class= "Normaltextrun SCX26996116" >text-overflow:ellipsis;/* display ellipsis (...) when text inside an object overflows; To be used in conjunction with Overflow:hidden; */

}

This article to Source:CSS Control long text content display (truncated place with ellipses instead)