Overflow content is text, such as a paragraph or a text string, that exceeds a desired space. It also applies to a series of components that surpass a given space. Overflow content is typically reduced to fit a space or reduce repetition. Truncation and “Show more” buttons are two ways to indicate that overflow content is continued elsewhere or below the fold.
Truncation, or shortening, is typically used for static text or links that
exceed the size of their container. Truncated items are represented by an
... and should represent three or more truncated characters in a text
string. There must be at least four characters of non-truncated content in a
truncated string. Truncated items always include a browser tooltip on hover to
show the entire string, name, or phrase that the ellipsis is representing. The
only time a browser tooltip does not need to be used is at the end of a
Good use cases for truncation include:
- Long URL links
- Paragraph of text (i.e. a description paragraph)
- Shortening of a long item name (user- or platform-generated)
Truncation should not be used on page headers, titles, labels, error messages, validation messages, or notifications.
There are three types of truncation: front-line, mid-line, and end-line.
|Front-line||Used at the beginning of a text string to indicate the text is continued from a previous location.|
|Mid-line||Used when several text strings have different beginnings and/or endings but the exact same middle characters. Can also be used to shorten a phrase or text string when the end of a string cannot be truncated by an ellipsis.|
|End-line||Used at the end of a character string or paragraph to indicate that there is more content in another location, to show that the pattern in a sequence continues, or to shorten a long text string.|
An ellipsis on its own may also represent condensed content. This type of truncation requires an overflow menu on hover instead of a browser tooltip.
To use front- and end-line truncation, enter the appropriate class below and add
title to populate the browser tooltip that appears when truncated text is
width of the container (or the text element itself) also needs to
be configured in order to calculate where the truncation will start.
<div class="container"><span title="123456789" class="cds--front-line">123456789</span></div>