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
Web (React)
iOS (Swift)
Android (Kotlin)
DocsGuidelines
Don’t hide anything essential
Truncating text works well for long text that might not otherwise fit on the screen. But you don’t want to hide information users need.
Make sure you’re only hiding things that add extra value. Not something preventing the user from continuing in their main flow.
Let users get the rest
Truncating text is a great way to preview longer text. But once users see a little of your content, they may want more.
Make it clear how they get the rest of the content. Include a button to add more content to the screen, link to the full content elsewhere, or anything else to make it available.
Related components
Hide
For more control over what appears on different screen sizes, see the hide component.