Overflow content

Truncation, or shortening, is typically used for static text or links that exceed the size of their container. Truncated items are represented by an ellipsis ... and should represent three or more truncated characters in a text string.

Example of a browser tooltip being used for truncation.

Example of end-line truncation for a paragraph.

Good use cases for truncation include:

Breadcrumbs
Pagination
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.

Type	Purpose	Default	Truncated
Front-line	Used at the beginning of a text string to indicate the text is continued from a previous location.	`123456789`	`...56789`
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.	`123400005678987600004321`	`1234...56789876...4321`
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.	`123456789`	`12345...`

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.

Example of a truncated breadcrumb utilizing an ellipsis with an overflow menu.

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 hovered. The width of the container (or the text element itself) also needs to be configured in order to calculate where the truncation will start.

Type	Class
Frontline	`.cds--text-truncate--front`
End-line	`.cds--text-truncate--end`

Mid-line truncation does not have its own class as it requires JavaScript. This example in CodePen shows how it is implemented.

The "Show more" button is used when there is a significant amount of overflow content. Implementing a "Show more" button gives a user the ability to see the content in more digestible chunks, as opposed to all at once.

A "Show more" button is used in place of scrolling, gradients, or fades as they are more prominent and actionable. If needed, a "Show less" can be used to again hide the content the user opened. "Show more" can also be presented as "Load more" in cases where performance is a concern. See the Loading section for additional details.

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Truncation

Usage

Variations

Ellipses alone

Code

Example usage

Mid-line truncation

“Show more” buttons

Feedback