Updated: April 13, 2021

Expandable Text

sap.m.ExpandableText

Intro

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.

Expandable texts in a table
Expandable texts in a table

When to Use

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

Expand text with 'More'
Expand text with 'More'
Text expanded inline, collapse with 'Less'
Text expanded inline, collapse with 'Less'

Size S – Popover

Expand text with 'More'
Expand text with 'More'
Popover text uses full screen, collapse with 'Close'
Popover text uses full screen, collapse with 'Close'

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

Elements and Controls

Implementation