Home >Web Front-end >HTML Tutorial >CSS- Text is hidden and shown as ellipsis after exceeding the specified width_html/css_WEB-ITnose
CSS- Text is hidden and shown as ellipsis after exceeding the specified width_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:33856browse
General text truncation (applies to inline and block):
.text-overflow {
display: block;/*Inline objects need to be added*/
width:25em;
word-break:keep-all;/* No line breaks*/
white-space :nowrap;/* No line breaks*/
overflow:hidden;/* Hide the excess content when the content exceeds the width*/
text-overflow:ellipsis;/* When the text within the object Display omission mark (...) when overflowing; needs to be used together with overflow:hidden;. */
}
For table text overflow definition:
For table out of range display ellipsis
table{
width:25em;
table-layout:fixed;/* Only when the layout algorithm of the table is defined as fixed, the definition of td below will work. */
}
td{
width:100%;
word-break:keep-all;/* No line breaks*/
white-space:nowrap;/* No line breaks*/
overflow:hidden;/* Hide the excess content when the content exceeds the width*/
text-overflow:ellipsis ;/* Display the omission mark (...) when the text in the object overflows; needs to be used together with overflow:hidden;. */
}
Such as:
------------ -------------------------------------------------- ----------------------------------
If you want to mouse over To stop displaying the content of the ellipsis, just write it in the title~
Code:
<style type="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><div id="div1" title="AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD"> AAAAAAAAAAAAABBBBBBBBBBBBBCCCCCCCCCCCCCCDDDDDDDDDDDD</div></body>