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).
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 … (… 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:
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.
This text is clipped but it expands on hover.
Ellipsis and Multi Lines