How to Truncate Text in Figma: Simple Steps

To truncate text in Figma, set the text box width and enable Clip content in the text properties. This hides overflow text and shows an ellipsis if you use auto layout with fixed size frames.

Syntax

In Figma, truncating text is controlled by the text box size and the Clip content option. You adjust the width of the text box and enable clipping to hide overflow text.

• Text box width: Set a fixed width to limit visible text.
• Clip content: A checkbox in the properties panel that hides text outside the box.
• Auto layout: Use fixed size frames to control truncation with ellipsis.

none

/* No code syntax in Figma, but here is the conceptual usage */
TextBox.width = fixed_value;
TextBox.clipContent = true;

Example

This example shows how to truncate a long text string inside a fixed-width text box with clipping enabled.

none

1. Create a text layer with a long sentence.
2. Set the text box width to 200 pixels.
3. In the right panel, check the <strong>Clip content</strong> box.
4. The text will cut off at the box edge, hiding overflow.
5. To show ellipsis, place the text inside an auto layout frame with fixed width and enable truncation in the frame settings.

Output

The text displays only up to the box width and hides the rest, showing a clean truncated line.

Common Pitfalls

• Not setting a fixed width on the text box causes text to wrap instead of truncate.
• Forgetting to enable Clip content means overflow text remains visible.
• Using auto layout without fixed size frames will not show ellipsis.
• Trying to truncate without a frame or auto layout limits control over ellipsis display.

none

/* Wrong way: No fixed width, no clipping */
TextBox.width = auto;
TextBox.clipContent = false;

/* Right way: Fixed width and clipping enabled */
TextBox.width = 200;
TextBox.clipContent = true;

Quick Reference

Action	How to Do It in Figma
Set fixed text box width	Select text layer > drag right edge or enter width in properties
Enable clipping	Select text layer > check 'Clip content' in right panel
Show ellipsis	Place text in auto layout frame with fixed width > enable truncation
Prevent wrapping	Use fixed width and clipping instead of auto height

Key Takeaways

Set a fixed width on your text box to limit visible text.

Enable 'Clip content' to hide overflow text outside the box.

Use auto layout frames with fixed size to show ellipsis for truncated text.

Without clipping, text will overflow and not truncate.

Truncation works best when combining fixed width, clipping, and auto layout.