Allow text truncation based on number of lines

Hey Richard, can you share a few more details / an example of what you’re trying to accomplish?

Currently you can set “Fill container” on the truncating text layer, which makes the text field dynamically adapt the number of lines before truncation, based on the Auto layout parent.

Alternatively, you can manually set a fixed size of the text box to get a fixed amount of lines.

I’m gonna add on to this because I think I may be needing the same thing as Richard.

What I really want is to be able to set a number of text lines when truncate is on, then have it respect my fixed-height rules, but also be able to utilize ‘hug’, while still being truncated.

The problem with the current implementation is that the fixed-height setting makes it hard to get the right box height (lots of manual resizing trial-and-error), and it also makes it hard for other objects that may affect the container’s auto-layout size to also affect the truncation lines.

I want to be able to hug the truncating text layer so that it sets the height of the Autolayout parent (instead of the parent setting the height and truncating based on that), but only to a maximum of a set number of lines.

For example, if I have an Autolayout card with a child text layer, and the more text you add, the taller the card gets. I want to be able to limit the number of text lines to 3 for truncation, so the card doesn’t keep getting taller beyond that when I paste some text in there. But I don’t want to have to set the parent card height manually so that the text fills that space and I don’t want the parent to always be a certain height if text isn’t going to fill the entire space.

I have a similar case. I have a responsive component where there is text (on the left) + icon. I need the icon to be always 8px after the end of the text area, so I need to use “hug” for the text. But in cases the text is pushing the icon out of the parent component I want the text to be truncated.

Is the third one that Thiago shared in the expected outcomes list possible? It seems like the “truncate text” option will cut out a word entirely as part of truncation, but I would like to have words that would exceed the bounding box partially displayed instead of disappear entirely.

Exactly! Our use cases:

1. Specify a number of lines after which to truncate the text, regardless of width. Resizes height dynamically before that. Very common

2. Fixed height for text field, truncate text on overflow, covered by current functionality

3. Truncate after a specific number of characters rare

I also need hug + truncate for basically the same issue. Either a max-width or number of characters could fix this?

+1 for truncating characters instead of word-by-word please 🙌

I need to create a symbol that is a card, with title and an optional secondary label, which can span max 2 lines.

I tried the truncate feature, but it’s not doing what I need to accomplish.

I guess the solution could be defining on the text object level, a Max-height (no. of rows) or Max-width (pixels).

Also +1 on truncating characters, not (just) words.

I need to design something with a similar logic to your card, and your visual example here is great to illustrate the use case.

My only disagreement with yours and other comments here is that we should always design - and hopefully Figma should be implemented - in a way that emulates what can be done on the code. By that I mean that the way to achieve that should be by simply setting max-height or max-width either to the text element itself or to its parent element, and not by defining number of lines or characters, since there is no elegant way (AFAIK) to implement that without using JS.

You can check this reference for different techniques on how to truncate text based on number of lines (text clamping). Again, no elegant way to do it purely with CSS.

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