Wrapping and Truncation

Foundations / Interaction / Wrapping and Truncation

Intro

Wrapping and truncation define how text behaves when the length of the text exceeds the available space. The responsive behavior is device-independent and is the same on all form factors. Different controls use wrapping to show full text or truncation to save space, depending on how important the information is and how much room is available.

When to Use

Always check the responsive behavior of text, even if the text appears to fit at first glance. Issues often arise when text is translated into another language, or when the text container is resized. Choose the most appropriate text display variant for your use case.

In general, wrapping is the default way to design the responsive behavior of text. Always consider using wrapping unless there are specific requirements otherwise.

Use wrapping if:

  • The information is crucial for the user.
  • The user is required to read the full text (for example, in consent forms).
  • You are uncertain about how important the text is for the user.
  • You want to display numbers in a piece of continuous text.
  • The text for a list item is crucial for the user.
  • You are displaying a label, object status, link, or title. For these components, use a short, precise text.
guideline
Although wrapped text may not always provide the best visual design, it is important to prioritize the user experience when crucial information is involved. By using wrapping, you can ensure that users can access the information they need without requiring additional interaction.

Use truncation if:

  • The component is designed to save vertical space and only allows one line of text with a limited width (for example, the title of a toolbar).
  • The text contains only secondary information. For example, the text in a table cell could use truncation if the corresponding column is resizable or uses a custom display concept to provide an additional interaction.
guideline
If you need to use truncation, provide a way for users to view the full text with a single interaction. For more information, see Displaying Truncated Text.
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint

Use a combination of wrapping and truncation if:

  • The text is a teaser or serves as an appetizer for a longer text, such as an article. In this case, you can define the maximum number of lines shown.
  • The component is designed to save vertical space, and only allows a limited number of lines, with a limited width (for example, tiles with two lines for the title).

Don’t use wrapping, truncation, or a combination of both if:

  • You want to show a standalone numeric value, such as 1,000.00 EUR.
  • The text is inside another UI element that is not intended to wrap (such as a button).

Variants

Wrapping and truncation variants – wrapping, truncation, and combined behavior in different components.

A. Wrapping: Automatically moves text to the next line when it no longer fits within the available space. When a word doesn’t fit at the end of a line, either the whole word moves to the next line, or only part of it, depending on the language. The example shows wrapped text in a message strip.

B. Truncation: Shortens text by cutting it off when it exceeds the available space. Excess text is hidden. A truncation indicator (ellipsis: … ) usually appears at the end of the truncated text depending on browser support. The example shows truncated text in a dialog header.

C. Combination of Wrapping and Truncation: A text may first wrap over multiple lines and then truncate when the line limit is reached. The example shows a card title that wraps over three lines and then truncates.

Displaying Truncated Text

It is important to provide users with a quick way to see the full text with a single interaction. This can be achieved with the existing interactions for a component, via navigation to a detailed view, or by implementing a custom display concept.

Built-In Display Mechanism

The component already has an interaction mechanism that reveals the full text.

Truncation in a dropdown list – remaning text is revealed when the list is opened

Display via Detail View

The full text becomes visible once the user navigates to the detail view in the user flow. Typically, the user navigates to a different screen or opens a popover or dialog.

Truncation in a card – remaining text is revealed when navigating to the detail view

Custom Display Concept: Expandable Text

If the component has no built-in mechanism or navigation option to display the full text, implement a custom solution using expandable text.

Expandable text allows the user to display the full text with a single interaction on an additional element, such as a link. The text can be expanded in place or be displayed in a separate popover.

Example 1: Expanded text in place

Clicking the Show More link expands the text while clicking the Show Less link collapses it

Example 2: Full text in a popover

Clicking the link Show More link opens a popover with the full text while clicking the Show Less link hides it

guideline

Ensure that users can interact with the truncated text on interactive components, not only using a mouse, but also with a keyboard or touchscreen.[internal_only] For examples, see the specification.[/internal_only]

The order of tabs on a tab bar must always remain consistent. The tab order should not be affected by truncation or by a custom solution to display the full tab text.

Usage Overview

<div> <div>Pattern</div> <div>Use Case</div> <div>Guideline</div> </div> <div> <div>Built-in display mechanism</div> <div>The truncated text is located inside a component for which a built-in display mechanism is available.</div> <div> <p>This is an automatic display mechanism. No other solution is needed when the full text is readily available via a single interaction within the component.[internal_only]</p> <p>See the <a href="https%3A%2F%2Fwww.figma.com%2Fproto%2F7lMqfFtQTQWVpQsGte2cgB%2FWrapping-and-Truncation%3Fpage-id%3D2221%253A1101%26type%3Ddesign%26node-id%3D2221-1357%26viewport%3D-8248%252C-7569%252C0.62%26t%3DVxlx3eXUdo3MFCxY-1%26scaling%3Dmin-zoom%26mode%3Ddesign">specification</a> for examples.</p> <p>[/internal_only]</p> </div> </div> <div> <div>Display via detail view</div> <div>The truncated text is part of an interactive element, and the full text is available after navigating to the detail view in the user flow. For example, the full text can be viewed on a detail dialog or on a follow-on page.</div> <div> <p>This optional display mechanism needs to be evaluated by the application team to determine if it sufficiently meets the needs of their users based on specific use cases.</p> <p>No other solution is required if:</p> <ul> <li>The full text is readily available through a single interaction.</li> </ul> <p>Consider using an additional custom display concept if:</p> <ul> <li>The full text is not visible directly in detail view.</li> <li>Navigating to the detail view to display the full text would disrupt the user’s flow.</li> </ul> </div> </div> <div> <div>Custom display concept: expandable text</div> <div> <p>There is no built-in mechanism or navigation option to display the full text.</p> <p>or</p> <p>The truncated text is a longer text.</p> </div> <div> <p>Allow users to expand the truncated text with a single click on an additional element, such as a text link.</p> <p>This custom solution must be implemented by the application team.</p> </div> </div>

[internal_only]

Specifications

Wrapping and Truncation v1.0.1

[/internal_only]