I have 2 text elements placed in a group that is a “Column” container layout (see group with black outline). I want each text to be only one row (not more) and therefore I applied a fixed height of 22px to each text element.
The 1st text (green outline) contains a a text that is made up of several words and the text is truncated when it exceeds the width of the container. All good!
But the 2nd text (red outline) contains only one word (no space in between words) and it does not display at all when its length exceeds the width of the container. I put an arbitrary text which is “thisisaverylongwordwithabsolutelynospace.”
How can I automatically truncate this word with a an ellipsis at the end? e.g. thisisaverylongwordwithabsolu…
I’d like to avoid to have a condition like “if number of characters > XXX, then truncate word” because it’s not very scalable
the criteria for truncating is basically show as much as possible until full width is reached. So in my case instead of showing nothing in the red-outlined text box, I want to display as much text as possible : thisisaverylongwordwithabsolu…
By it’s not very scalable I meant that there are multiple places in my app where I’d need to do that and I need to calculate the number of characters depending on the width of the container (which also changes since its width is responsive).
Basically what I’m trying to implement is the equivalent of word-break in css
Yes I could do that. Your answers confirm that there is no built-in option to do what i want to do so yes, I will need to build something along the lines of what you suggested. thanks!
