Skip to main content

ExpandableText

<ui5-expandable-text> | Since 2.6.0

The ui5-expandable-text component allows displaying a large body of text in a small space. It provides an "expand/collapse" functionality, which shows/hides potentially truncated text.

Usage​

When to use:​

  • To accommodate long texts in limited space, for example in list items, table cell texts, or forms

When not to use:​

  • The content is critical for the user. In this case use short descriptions that can fit in
  • Strive to provide short and meaningful texts to avoid excessive number of "Show More" links on the page

Responsive Behavior​

On phones, if the component is configured to display the full text in a popover, the popover will appear in full screen.

ES6 Module Import​

import "@ui5/webcomponents/dist/ExpandableText";

Basic Sample​

Properties​

text​

DescriptionText of the component.
Typestring | undefined
Defaultundefined

maxCharacters​

DescriptionMaximum number of characters to be displayed initially. If the text length exceeds this limit, the text will be truncated with an ellipsis, and the "More" link will be displayed.
Typenumber
Default100

overflowMode​

DescriptionDetermines how the full text will be displayed.
Type"InPlace" | "Popover"
Default"InPlace"

emptyIndicatorMode​

DescriptionSpecifies if an empty indicator should be displayed when there is no text.
Type"Off" | "On"
Default"Off"

Slots​

No slots available for this component.

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Overflow Mode Popover​