CSS exceeds text specified width with ellipsis instead and text wrap analysis

This article mainly introduces the CSS beyond the text to specify the width of the ellipsis and text does not wrap the relevant information, small part of the usefulness of the sleep, I hereby share the script home platform for your reference

Generic truncation of text (for inline and block):

. text-overflow {       display:block;/* inline objects need to add */    width:31em;/* what to ask hovertree.com */    word-break:keep-all;/* do not change line * * *    whitewhite-space:nowrap;/* do not wrap * *    overflow:hidden;/* content beyond the width to hide the contents of the outside part */    text-overflow:ellipsis;/* Show ellipsis (...) when text inside an object overflows; use with Overflow:hidden; */}

For the definition of a table literal overflow:

Show ellipsis for table out of range

table{        Width:em;        table-layout:fixed;/* only the table-defined layout algorithm is fixed, the following TD definition will work. */}    td{       width:%;       word-break:keep-all;/* do not wrap */    whitewhite-space:nowrap;/* do not wrap */    overflow:hidden;/* content beyond the width to hide the contents of the outside part of the * *    text-overflow:ellipsis;/* display ellipsis (...) when text inside an object overflows; use with Overflow:hidden; */}

It is important to note that this CSS style only works on a single line of text, and if you want to use it on multiple lines, only the first line will work.

This writing only IE will have "...", other browser text beyond the specified width will be hidden.

The above is for the CSS beyond the specified width of the text with the ellipsis and the text does not wrap the relevant introduction, I hope to help you, but also very much thank you for the support of topic.alibabacloud.com!