Truncate text: align to common css and truncate by character not by word

Just a little feedback on the new text size option – I think it’s great that we now can choose to truncate text. However I find it confusing, that text is truncated by word and not by character. Therefor it does not behave in the same way as the default css would. By setting:

white-space: nowrap; 
width: 100px; 
overflow: hidden;
text-overflow: ellipsis;

The text will be truncated even in between words, just replacing the last 3 chars with dots. But Figma hides any word that does not fit fully into the line.

Any chance this can be aligned, or at least be offered as an option?

8 Likes

This seems like a bug. When can we expect this to truncate by character? Until then its borderline unusable. I actually causes more confusion than accurately representing intent. I want to be exited about this but its a big miss and seems really easy to fix.

Agreed, this behavior is puzzling. I just tested it with the words “Most Popular First”, and it put ellipsis in the following places:

  • M…
  • Mo…
  • Mos…
  • Most…
  • Most Popul…
  • Most Popula…
  • Most Popular…
  • Most Popular First

I would expect it to put the ellipsis after every character that fits, like CSS does. But in the current implementation there are sudden jumps for longer words, so you don’t ever see “Most Po…” or “Most Popular Fi…”, which would normally fit in the available space.

1 Like

Not 100% sure but this seems to be fixed. My button labels currently truncate per character :smiley: :partying_face:

It would be super, if we could get detailed changelogs, even for those seemingly small changes, I often feel like the releases.figma… page does not answer all questions about recent changes. Is there a detailed one somewhere?

It still works the same for me – I have just reloaded the tab to make sure any Figma updates are applied, created a text field with content “Most Popular First”, and set text truncation. It behaves exactly the same as described above, not character by character.

Could you please check it with this “Most Popular First” text on your end?

I’m facing exactly the same issue at this moment.
It would be great to be fixed.

CleanShot 2022-11-24 at 17.14.14

5 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.