When text exceeds the width of an element, the end of the text is abbreviated with a three-point leader (…) However, it may not work as expected. This section describes the causes and remedies.
Causes of text-overflow: ellipsis; not working
text-overflow: ellipsis; is effective when the following conditions are met
white-space: nowrap;is set (to prevent text from breaking lines)overflow: hidden;is set (to prevent the display of text that extends beyond the element)- The parent element or itself must have a display setting with width, such as
display: block;ordisplay: inline-block;.
If these conditions are not met, text-overflow: ellipsis; will not work.
Effect of display: block; and how to deal with it
Especially when the display setting is set to inline, text-overflow: ellipsis; often does not work because the width of the element depends on the length of the text. In this case, changing to display: block; ordisplay: inline-block; will set the width to the element and allow ellipsis to work correctly.
Code Example
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block; /* change as needed */
width: 200px; /* set width as needed */
}Other notes
In special cases, such as when the width of a parent element or an element is placed within a flex orgrid layout, further adjustments to the layout are necessary. Setting max-width,min-width, etc. as necessary can help stabilize the display.
Conclusion
If text-overflow: ellipsis; does not work, change the display property to block or inline-block and review the overflow andwhite-space settings. Also, adjust the width of the element to achieve the intended ellipsis.