Word & Character Based Text Truncation for Framer

Introduction

Managing text length is essential for maintaining a polished and user-friendly interface. With this Word and Character Based Text Truncation code override for Framer, you can limit the number of words and characters displayed in your text elements while preserving styles, formatting, and nested structures. As part of your growing Framer resources toolkit, it’s perfect for ensuring consistency and readability in your designs, especially within CMS scenarios where the text length varies.

Why Add a Text Truncation Feature?

Truncating text dynamically can solve design challenges when dealing with unpredictable or lengthy content. This feature allows you to:

• Create visually balanced layouts without overflowing text.

• Maintain styling, even for text wrapped in rich formatting like bold or italic.

• Simplify content management by setting a global word limit for text-heavy sections.

Whether you’re building a blog layout, a content card, or a user profile, this override ensures that your design remains consistent. Adding this to your Framer resources collection can streamline your workflow and solve a common problem for text-heavy projects.

Intelligent Truncation

The code is designed to intelligently handle truncation by avoiding awkward placements of ellipsis (...). It automatically removes trailing punctuation marks (such as ,, ., ;, !, ?) and spaces before appending the ellipsis. This ensures a clean and visually appealing result, even when the truncation point falls right after punctuation or a space.

Example:

• Input: "This is a sample text, with some punctuation; and more."

• Output: "This is a sample text with some punctuation..."

1. Space-Aware Truncation
   The algorithm is smart enough to detect and remove trailing spaces before adding the ellipsis. This prevents scenarios where the ellipsis is awkwardly placed after a space, ensuring a seamless reading experience.

   

2. Consistent Behavior Across Character and Word Limits
   Both the character-based and word-based truncation methods incorporate these smart features, ensuring consistent behavior regardless of how the text is truncated. Whether you're limiting by characters or words, the output will always look polished and professional.

How to Use the Code Override

The code override is simple to use and takes just a few steps to integrate into your Framer project:

1. Grab the remix link at the bottom

2. In the assets panel locate the TruncateText.tsx

3. You can edit the word or character limit on const withWordLimit = 20 or const withCharacterLimit = 100, the default is 20 words or 100 characters

4. ⌘ + A to select all and ⌘ + C to copy all

5. In your Framer project, create a new Code Override and paste the code inside

6. Now select any text layer for which you would like to truncate its length

7. In the code overrides panel you will set the File to whatever you called your code override and the Override to withWordCount or withCharacterCount

8. Done, you're all set

P.S. You will only see the code override in action once you press Preview or Live within a browser