Ready

Text Truncate

The Text Truncate Component is a UI element that manages the display of lengthy text content by truncating it to a specified number of lines in its collapsed state.

View in Storybook

Ready

Text Truncate

The Text Truncate Component is a UI element that manages the display of lengthy text content by truncating it to a specified number of lines in its collapsed state.

View in Storybook

Ready

Text Truncate

The Text Truncate Component is a UI element that manages the display of lengthy text content by truncating it to a specified number of lines in its collapsed state.

View in Storybook

States

Collapsed
Expanded

Behaviors

Expanding

When the "Show more" text is clicked, the component expands vertically to show all hidden text.

Number of lines

The component can be configured to show one, two or three lines of text when in the collapsed state.

Related Components

Ready

Accordion

An accordion expands in place to expose some hidden information allowing the user the flexibility to show and hide certain content by utilizing the progressive disclosure interaction pattern.

Ready

Accordion

An accordion expands in place to expose some hidden information allowing the user the flexibility to show and hide certain content by utilizing the progressive disclosure interaction pattern.

Ready

Accordion

An accordion expands in place to expose some hidden information allowing the user the flexibility to show and hide certain content by utilizing the progressive disclosure interaction pattern.

Additional Reading

Wrapping and Truncating Text https://experience.sap.com/fiori-design-web/wrapping-and-truncating-text/

undefined

Need more guidance?

Suggest an addition or an edit.

Submit an update

Need more guidance?

Suggest an addition or an edit.

Submit an update

Need more guidance?

Suggest an addition or an edit.

Submit an update

Overview

States

Behaviors

Overview

States

Behaviors

Overview

States

Behaviors

Text Truncate

The Text Truncate Component is a UI element that manages the display of lengthy text content by truncating it to a specified number of lines in its collapsed state.

Text Truncate

The Text Truncate Component is a UI element that manages the display of lengthy text content by truncating it to a specified number of lines in its collapsed state.

Text Truncate

The Text Truncate Component is a UI element that manages the display of lengthy text content by truncating it to a specified number of lines in its collapsed state.

States

States

States

Behaviors

Behaviors

Behaviors

Expanding

Number of lines

More

More

More

Related Components

Accordion

Accordion

Accordion

Additional Reading

Need more guidance?

Need more guidance?

Need more guidance?