CSS controls that the text exceeds the specified width to display ellipsis and text without line breaks-roucheng

CSS controls text to display ellipsis beyond the specified width and text without line breaks-roucheng common text truncation (for inline and block ):

. Text-overflow {display: block;/* The Inline object must be added with */width: 31em;/* Ask hovertree.com */word-break: keep-all; /* Do not wrap */white-space: nowrap;/* Do not wrap */overflow: hidden;/* Hide content beyond the width */text-overflow: ellipsis;/* The omission mark (...) is displayed when the text in the object overflows (...); must be used with overflow: hidden. */}

Definition of table text overflow:

If the table is out of range, the ellipsis is displayed.

1 table {2 width: 30em; 3 table-layout: fixed;/* the following definition of td takes effect only when the table layout algorithm is defined as fixed. */4} 5/* 6 he asked 7 hovertree.com 8 */9 td {10 width: 100%; 11 word-break: keep-all; /* Do not wrap */12 white-space: nowrap;/* Do not wrap */13 overflow: hidden; /* Hide the content in excess of the content when the content exceeds the width */14 text-overflow: ellipsis;/* display the omitted mark (...) when the text in the object overflows (...); must be used with overflow: hidden. */15}

It should be noted that this CSS style is only effective for single lines of text. If you want to use it on multiple lines, it only works for the first line. Only Internet Explorer can write "...",

Other browser text is hidden when the specified width is exceeded.

Effects: http://www.cnblogs.com/roucheng/p/texiao.html