The following small series for everyone to bring the CSS text beyond the specified width after hiding and display as an ellipsis implementation of the sample code. Small series feel very good, now share to everyone, also for everyone to make a reference. Let's take a look at it with a little knitting.
Generic truncation of text (for inline and block):
. text-overflow { display:block;/* inline objects need to be added */ width:25em; 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; */}
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;/* 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; */}
Code:
<style type= "Text/css" > #p1 { 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><p id= "P1" title= "aaaaaaaaaaaaabbbbbbbbbbbbbccccccccccccccdddddddddddd" > AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD </p></body>