CSS propertyTypography
text-overflow
Decides how to mark text truncated at the end of a line, for example with an ellipsis.
- Initial value
clip- Inherited
- No
- Animatable
- no
- Applies to
- block containers
- JavaScript
element.style.textOverflow = "ellipsis"
Example
#CSS
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Example HTML
<ul class="stage" style="margin: 0; padding-left: 20px; width: 240px;">
<li class="title" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Module 1: Introduction to HTML and document structure</li>
<li class="title" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Module 2: Forms, fields, and data validation</li>
</ul>Preview
Definition and usage
#The text-overflow property determines what to show where text stops fitting. The ellipsis value adds an ellipsis, signaling that there is more text than shown.
It doesn’t work alone. The text must be on a single line (white-space: nowrap) and clipped (overflow: hidden), and the element must have a limited width. These three properties always go together.
A different technique handles truncating text after several lines: -webkit-line-clamp with display: -webkit-box, supported today in all major browsers.
Syntax
#Syntax
text-overflow: clip | ellipsis;Values
#Values in practice
#clip
The text is cut off with no character at all.
.demo { text-overflow: clip; }ellipsis
An ellipsis appears at the end.
.demo { text-overflow: ellipsis; }Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Make the full text of a truncated title available elsewhere, for example in a
titleattribute or on a details page. - Inside a flex item, truncation only works once you add
min-width: 0.
Related entries
#Spotted a mistake or missing an example? Write to us.