CSS Summary: A line of text beyond the specified width overflow processing

Css

See the title you must be very easy to think of truncated text plus "..." approach. Haha, that's it. In fact, writing this log is just to make a record, because there seems to be a lot of people do not remember how to deal with this situation.

We can also refer to 52css.com's previous articles:
The automatic hiding processing of text overflow in CSS http://www.webjx.com/htmldata/2007-05-05/1178374126.html
How to set the list (LI) beyond the partial display ellipsis http://www.webjx.com/htmldata/2007-05-05/1178374241.html

General text truncation (for inline and block):

. text-overflow {
display:block;/* inline object need to add * *
Width:31em;
word-break:keep-all;/* do not change line * *
white-space:nowrap;/* do not change line * *
Hide the contents of the overflow:hidden;/* when the content is out of width * *
text-overflow:ellipsis;/* displays an ellipsis (...) when text overflows within an object, and is required to be used with Overflow:hidden. */
}

For a table text overflow definition:

table{
Width:30em;
table-layout:fixed;/* only the layout algorithm that defines a table is fixed, the following TD definition can work. */
}
td{
width:100%;
word-break:keep-all;/* do not change line * *
white-space:nowrap;/* do not change line * *
Hide the contents of the overflow:hidden;/* when the content is out of width * *
text-overflow:ellipsis;/* displays an ellipsis (...) when text overflows within an object, and is required to be used with Overflow:hidden. */
}

What you need to be aware of is that this dongdong 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 outside the specified width will be hidden.