The expandable text control provides access to truncated text. A More/Less link shows or hides the full text. You can expand the text inline or display it in a popover, depending on your use case.

Use expandable text if:

• You need to handle long texts or descriptions inside a responsive table, list or form.
• You need to provide access to truncated text.

Do not use expandable text if:

• You need to display text within UI tables (grid table, tree table, analytical table) or the Gantt chart.
• You can provide short and meaningful alternatives.
• The content is critical for the user. In this case, use short descriptions that fit into the available space.

Components

• Text
• More/Less link
• Optional: Popover

Behavior and Interaction

Expanding/Collapsing the Text

Clicking the More link after the truncated text expands the content inline or in a popover, based on the application settings. When the text is fully visible, the More link is replaced by a Less link.

Clicking the Less link collapses the content again. If a popover is used, it can be closed by clicking Less (1) or clicking anywhere outside the popover (2).

Responsiveness

In sizes S, M, L, and XL, the text can be expanded inline or in a popover.

If you use a popover, the content is displayed in full screen mode on size S.

Size S – Inline Text

Size S – Popover

Top Tips

• Adapt the number of characters shown before truncation to fit your use case (default: 100 characters).
• If using a popover: make sure that the width of the popover always corresponds to the length of the text.
• If you use the expandable text in a table, set minimal padding to avoid extra white space within the rows.

Related Links