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.

[style:text-max-lines:<number>]
Example:
[style:text-max-lines:2]

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 "...".

[style:text-truncate:clip]

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 "...".

[style:text-truncate:start]

End

The end parameter shows only a limited number of lines from the start and hides the rest with an ellipsis "...".

[style:text-truncate:end]

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.

[style:text-truncate:middle]

🏷️ How to add the tag

1. Design a text layer component.

2. Paste the tag to the text layer.

💾 Example files

Duplicate the files below to see how to set it up!

Bravo Sample: Lines & Truncation | FigmaFigma