Generic truncation of text (for inline and block):
. text-overflow {
display:block;/* inline objects need to be added */
Width:25em;
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:
Show ellipsis for table out of range
table{
Width:25em;
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; */
}
Such as:
------------------------------------------------------------------------------------------------
If you want to hover over the ellipsis display, you can write it in the title.
Code:
<styletype= "Text/css">#div1{padding:10px;width:200px;Height:30px;Text-shadow:3px 3px 3px #aaaaaa;Border:1px solid #999999;Text-overflow:ellipsis;Overflow:Hidden;Word-break:Break-all;White-space:nowrap; }</style><Body><DivID= "Div1"title= "AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD">aaaaaaaaaaaaabbbbbbbbbbbbbccccccccccccccdddddddddddd</Div></Body>
css-text is hidden and displayed as an ellipsis when it exceeds a specified width