Allow text truncation based on number of lines

The new “truncate text” feature is nice, but it would be way more useful to me if it worked with auto-layout where I don’t have to have a set text field size from the start, which doesn’t allow for any container resizing before truncation.

1 Like

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.

2 Likes

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.

hug+truncate

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.