When creating UI specifications, consider cases when text will overflow its pre-defined containers. We have two ways of handling this scenario:

Truncating: text is hidden behind an ellipsis (and displayed on-hover) .

Guide title exceeds container width, is truncated.

Wrapping: text breaks into multiple lines, expanding vertically downwards.

Guide segment listing continues into the second line.

Truncating text

Using truncation

When a text string's length exceeds container width, and the container has a limited height, use truncation: substitute a section of the text with an ellipsis ("...").

A truncated string should still show an amount of text that is meaningful in the given context.

Truncated items always include a tooltip (browser or Design System) on hover to display the entire string.

Use truncation for breadcrumbs, long URLs or labels, list items.

Variants

End truncation

Ellipsis substitutes the end section of a text string. Most common variant. See above for examples.

Mid-line truncation

Ellipsis substitutes the middle section of a text string. Used when it is not advisable to truncate the end (or the beginning) of the string, because they provide required information, eg. file names or links.

Front truncation

Ellipsis substitutes the front section of a text string. Currently, this variant is not in use.

Paragraph truncation

Truncate text into a single line and use a button (e.g., "Read more") to allow users to see more content. Use a gradient combined with the tertiary button variant.

Wrapping text

Using wrapping

For any longer paragraph text, headlines, titles, the text should continue downwards with line-breaks. The height of the UI container should accomodate this. Consider wrapping particularly in case of dynamic text that can appear in multiple languages. Opt for wrapping when:

The user is required to read the information, e.g., consent forms, functionality descriptions, notifications.

You can predict or accomodate the size of the text.

When to use both?

In some cases, you might have to use both wrapping and truncation. Wrap text into a pre-defined number of lines, and use paragraph truncation for the rest.

When a paragraph contains text that is not essential for the user to read, eg. code to be copied or entered credentials. Use a ‘show more’ button when you need to limit container height. Consider using a "copy" button to enable users to copy text in one click.

When you would like to show a preview of content that has its own space and can be viewed after clicking a button or link.

Do's and dont's

Test designs containing user-generated text for edge-cases (languages other than English, particularly German, responsive behaviour, etc.), and always specify text overflow handling.

Don't

Do not truncate the following: headlines, titles, labels, error messages, validation messages, notifications. The UI should accomodate wrapping in these cases.

Avoid creating static text content that is too long for its existing container.

In case of item lists, do not truncate the distinguishing part of the text.

Do not display a tooltip when the text fits the container.

In this case it it unnecessary to display a tooltip.