Truncate Text

Show Preview
Truncate Text

About Truncate Text

NOTE: Since this component was first published, Framer has released Truncate for text layers. This component will continue to work, but it's now easier than ever to add truncation to your text layers natively in Framer without an additional component like this one.See the update here:

About this component:

Truncate paragraphs & headlines to the size you need for your project. Adjusts automatically to the width of component and number of lines set (component must be set to Height: Fit to work with lines constraint).

Ellipsis (…) style truncation. Supports variables.

HOW TO USE:

  1. Set component

    • Width to Fill or Fixed

    • Height: Fit

  2. Enter your Text.

  3. Select the number of lines you want to display using the stepper or slider.

  4. Style your font.

Ideal use-case for CMS where titles and descriptions can vary in length.

TruncateText component controls in Framer UI.
TruncateText component controls in Framer UI.