Rules of text truncate

Hey Aurelien,

Make sure your text has a fixed height (cuts it off horizontally) or is set to fill content when using auto layout, otherwise figma does not know where to cut off your text and turns “truncate” off. (you need to turn it on again, might be one confusing point) If you are not using auto-layout and just constraints you can set your text to for example left and right and top and bottom in the constraints menu to make truncating work.

Have a great day

I think @Aurelien_Barbier is referring to the rule behind the truncation feature. It’s pretty weird, sometimes it advances by one character, at other times by four. 🤔

You are right, rule behind truncation is really weird, I sometimes need only a few characters …but it truncates a complete word…

cc @Figma_Support

oh got it! This is also something I would like to know 🤔

Yes it’s more about the rule behin truncation, not how to activate it 🙂
Thanks for your answers !

I’m also having this issue, sometimes it truncates in the middle of the word (what I want) and other times it will only truncate at the end of a word, leaving extra space rather than filling the whole frame.

It would be useful to set if you want to truncate the text by word, by character, or by syllable! I need this

Yeah it’s very annoying sometimes that complete words are truncated out! We need more control over this

Any update on that?

Hi All, Thank you for bringing this to our attention!

After checking internally about the text truncation rules, we expect that the ICU word break rules will be applied.

If you’re experiencing something different, would you mind ‌reaching out to our support team here?: https://help.figma.com/hc/en-us/requests/new?ticket_form_id=360001744374
Please be sure to use the email associated with your Figma account, and include the video of the issue you are facing.
This way, our team can go ahead and pass this along to our engineers so they can help us look into this further.

Thanks all for your help here!

Any update on this, in plainer English than the “ICU word break rules”?

I’m working with a use case that is pretty common; i.e., I’m trying to create a simple banner notification with a title and timestamp that maintain 10 pixels of separation.

So, I have the title text set to “Hug” within an auto layout containing both text elements. This is then nested within another auto layout that controls all the banner elements. (e.g., icon, expand/collapse arrow, etc.)

Ideally, the title would ONLY be truncated when the banner width shrinks to the point that the title, timestamp, and expand/collapse arrow can no longer fit without overlapping or violating the padding rules of the auto layout. But I haven’t found a way to do this.

Setting a max-width on the title is a less-than-ideal solution, as I have to choose a narrow width that works with narrow banners. But when the banners are wider, the title text is still relatively short.

Also, it doesn’t resolve the truncation problem shared above whereby the text box extends by many spaces beyond the ellipsis.

Any updates on this? Struggling with a similar scenario in 2024 😃

Would also nice to add truncation positioning for long texts, where it’s important to keep visible the ending and the middle could be truncated.

Running into this issue with two text layers that match in all settings truncating differently. One pulled from a nested instance and one as a fresh text layer, both exact same styles and width settings: one will lop off whole words while the other truncates letter-by-letter as expected.

I have this issue with RTL fonts the the 3 dots are overflowing the container. dose anyone encounter this issue and can help? (left, center and right alignment as well)