Framer Update, Layout & Design

Framer Update: Text Truncation

Benjamin

2:24

6K views

Sep 2, 2025

About this lesson

Introducing Text Truncation. This new property lets you set a maximum number of lines for any Text Layer, with support for both single and multi-line truncation. This makes it easy to manage dynamic content and keep layouts under control. You can find the new property under the Text menu, and it supports Variables too. Watch the video to see the new layout setups this unlocks. https://framer.com/updates/text-truncation

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Yo, my name is Benjamin and this is 0:03truncation in framer.0:08Let's dive in. In our component, we have 0:12some copy that appears on click and the 0:15text contents here are assigned to a 0:17variable. So, we don't know the amount 0:20of lines up front. This is a great use 0:23case for truncation as it would let us 0:26control the exact amount of lines shown 0:29regardless of the actual contents. So to 0:33truncate with the text layer selected,0:36I'll head over to the text menu and hit 0:39truncate. This adds a new property 0:42control that lets you decide the amount 0:44of lines to truncate, which works 0:47especially well on text layers with 0:50height set to fit. Plus, this new 0:53property can also be made a variable,0:56which is useful for components like my 0:59accordion where on the instances we can 1:02decide the exact lines to show per row.1:06So here we see all the rows with 1:08different copy and then I'll set the 1:11variance to open for all of these so we 1:14can have a look at the lines. So with 1:17truncate we can work with dynamic 1:20content and still control the exact 1:23amount of lines shown which is useful in 1:26so many different layouts and 1:28components. And of course, we could also 1:31pick a unique amount of lines to show 1:33for each row here by putting in a 1:37variety of truncate values. So we can 1:40try something like this. Then I can 1:43select all rows and set the variance 1:45back to closed. And just like that, we 1:49have designed an accordion with dynamic 1:52contents where we have full control over 1:55the amount of lines shown per row and 1:58thus the height to which each row 2:01animates. That's multi-line truncation 2:04in Framer. Thank you for watching and 2:07stay tuned for more updates coming soon.2:14[Music]

TeachesSizing

Also coversCMS Pages / Dynamic Content Components Variables

Watch on YouTube ↗

‹ Level up your SEO with these awesome Framer Plugins

Animating between variants on scroll in Framer (Animation Lesson 10) ›