Text Lines & Truncation
Text line and truncation features allow for the control of text display by limiting the number of lines shown and cutting off excess content with an ellipsis or another indicator.
This is particularly useful in UI design where space is limited, such as displaying preview texts for news articles or product descriptions on shopping sites, or comments on social media.
👉 The tags
📍 Where to add the tag: A text layer.
Text line
Set a maximum line count for text. Any text over this limit gets cut off. The font size will remain unchanged.
Truncate
Text truncation refers to the process of shortening text content. If text is truncated, it usually ends with three periods, called an ellipsis.
Clip
Using clip restricts text to a specific number of lines, truncating additional content without displaying an ellipsis "...".
Start
The start parameter limits output by displaying only a specified number of lines from the end of the text, truncating the beginning. Additional text is omitted and replaced with an ellipsis "...".
End
The end parameter shows only a limited number of lines from the start and hides the rest with an ellipsis "...".
Middle
The middle setting shortens the text so that only a few lines from the beginning and end are shown. Anything in between is replaced with an elipsis "..." to show there's more not being displayed.
🏷️ How to add the tag
Design a text layer component.
Paste the tag.
💾 Example files
Duplicate the files below to see how to set it up!
Last updated
