Home > Developer > JavaScript
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>
Common text truncation (applicable to inline and block ):
. Text-overflow {
Display: block;/* Add inline objects */
Width: 31em;
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:
Table {
Width: 30em;
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. */
}
Yes... it's a bug in ie, and it won't happen in other browsers...
When CSS exceeds the width, it is changed to an ellipsis.
Your code has been tested by the browser. There are no problems, including ie5. I don't know what's wrong with you. If it doesn't work, you just need to fix li's height.
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
