Generic truncation of text (for inline and block):
Example Source Code [www.mb5u.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;/* does not change the line */
overflow:hidden;/* content is hidden when content is out of width */
text-overflow:ellipsis;/* display ellipsis (...) when text inside an object overflows; use with Overflow:hidden; */
}
For the definition of a table literal overflow:
Example Source Code [www.mb5u.com]
table{
Width:30em;
table-layout:fixed;/* only the table-defined layout algorithm is fixed, the following TD definition will work. */
}
td{
width:100%;
word-break:keep-all;/* does not change the line */
white-space:nowrap;/* does not change the line */
overflow:hidden;/* content is hidden when content is out of width */
text-overflow:ellipsis;/* display ellipsis (...) when text inside an object overflows; use with Overflow:hidden; */
}
What you need to pay attention to is that this stuff only works on a single line of text, if you want to use it on multiple lines, only the first line has a role. This writing only IE will have "...", other browser text beyond the specified width will be hidden.
CSS inline display beyond auto-hide