CSS-when the text exceeds the specified width, it is hidden and displayed as a ellipsis. css-ellipsis
Common text truncation (applicable to inline and block ):
. Text-overflow {
Display: block;/* Add inline objects */
Width: 25em;
Word-break: keep-all;/* Do not wrap */
White-space: nowrap;/* Do not wrap */
Overflow: hidden;/* Hide the content beyond the width of the content */
Text-overflow: ellipsis;/* indicates the omitted mark (...) when the text in the object overflows. It must be used with overflow: hidden. */
}
Definition of table text overflow:
If the table is out of range, the ellipsis is displayed.
Table {
Width: 25em;
Table-layout: fixed;/* the following definition of td takes effect only when the table layout algorithm is defined as fixed. */
}
Td {
Width: 100%;
Word-break: keep-all;/* Do not wrap */
White-space: nowrap;/* Do not wrap */
Overflow: hidden;/* Hide the content beyond the width of the content */
Text-overflow: ellipsis;/* indicates the omitted mark (...) when the text in the object overflows. It must be used with overflow: hidden. */
}
For example:
Bytes ------------------------------------------------------------------------------------------------
If you want to hover the cursor over the ellipsis, you can 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>
[-_-] When your eyes are tired, pay attention to work and rest. [-_-] classification: HTML/CSS labels: CSS, text line feed, ellipsis
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
