When to use
- For text that’s too long to display all at once.
- To give a taste of what text is available.
- With a clear way for users to display all of the text.
- As part of an approach of progressive disclosure.
When not to use
- For more control over what appears on different screen sizes—use a Hide component.
Component status
Figma | React | iOS | Android |
|---|---|---|---|
N/A | Released | N/A | N/A |
Behavior
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.