ExpandableText

<ui5-expandable-text> | Since 2.5.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

Description	Text of the component.
Type	string | undefined
Default	""

maxCharacters

Description	Maximum 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.
Type	number
Default	100

overflowMode

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

emptyIndicatorMode

Description	Specifies 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