Your bookmarks

Truncate

Clips the text to fit the given parent.

When you’re using progressive disclosure, you might have text that you’ve decided is too long to display all at once. You don’t want to overwhelm your users, so you want to keep it hidden but accessible.

Use a Truncate component to make sure your text fits within its parent and doesn’t take over your designs.

Component status

Figma
n/a
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
n/a