CSS text-overflow

The text-overflow CSS property defines what happens when text overflows the containing element. It allows adding an ellipsis (…), a custom string (experimental), or simply clipping the text in case of overflow. text-overflow doesn't break text like the white-space and overflow-wrap properties. The inserted character(s) will be styled the same as the text. There's no way to give them separate styles.

text-overflow requires overflow to be set to hidden. It also requires white-space: nowrap for the line to be unbreakable. The property alone doesn't allow clipping the last line of multi-line text (see below).

text-overflow: clip|ellipsis
text-overflow: ellipsis;

Browser Support: Full for the property. Opera Mini requires the -o prefix. See the text-overflow caniuse compatibility table for updated information. Using a custom string instead of ellipsis was supported only by Firefox at the time of writing. Since there's few support information on specific values, sometimes the surest way is to try it out. Use a strink like '+' (single-quoted) as value.

CSS Auto Ellipsis

The ellipsis character … (&#x2026 in HTML) looks like three dots but it's actually a single entity. The usual way to represent clipped text is by adding an ellipsis. Note that text-overflow requires overflow to be other than visible (usually hidden) and white-space: nowrap to have a single line of text. Without the latter the text would break and the ellipsis would be added only to long strings that don't fit one line. The most common usage is:

p.example {
width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #dadada;
}

This text is clipped with an ellipsis.

Clipping with a Custom String

Although the ellipsis is pretty clear, clipping with a custom string can be desirable in some cases. The support for a custom string instead of ellipsis was limited to Firefox at the time of writing. A string value is included in the CSS Specification, labeled as "functionality at risk". Keep in mind that the custom string cannot be styled.

Revealing the Text on Hover

With text-overflow, it's easy to clip text gracefully and expand it on hover or on focus to show the full string, all with CSS. It's a great simple effect for tooltips and other single-line texts that are too long to show complete. It requires an element that resizes to it's content width like an inline-block.

.expands{
width: 200px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #dadada;
} .expands:hover {
width: auto;
}

This text is clipped but it expands on hover.

Ellipsis and Multi Lines

It may be desirable to clip the text of a multiline element with a specified height. Unfortunately, text-overflow doesn't work that way. The solution this time is Javascript. Plugins like jQuery dotdotdot and Clamp.js produce the desired effect for multi line text.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>