Truncated text with [...] at the end

I have set up truncated text with a limit of 35 characters. I have added 3 dots […] to the end of any longer sentences but how do I remove these 3 dots to sentences less than 35 characters?

The effect I want is:

This is a long sentence whic …
Short sentence.

1 Like

Hi there, @darren.james7518… if you set up the text element so that the text on the Appearance tab is the full text…

appearance

… and then you add a conditional that truncates the text and adds the dots when the text is greater than 35 characters…

conditional

… you should be good to go because the dots will only be added if the text is greater than 35 characters.

Hope this helps.

Best…
Mike

11 Likes

Thanks so much Mike, what a great solution :grinning:

1 Like

Thank you Mike!

Although this works, it just count characters and doesn’t respect word boundaries, so sometimes we end up having a word chopped in the middle - which isn’t necessarily elegant.

I’m testing a piece of regex to select a fixed number of words (instead of number of characters) to truncate the text. The code is:

((^\w*\W*\b)(\w*\W*\w*\b){15}).+
Where 15 is the number of words taken (actually, 16, as the first word is always captured ).

Screen Shot 2022-09-22 at 14.52.34

Replace everything with $1[…], being […] your ellipsis.

It’s not the most robust solution, but might work.

Thanks for posting this, it is way over my ability to understand but others may find it useful.

Any chance you ever solved this where the number of words is dynamic based on the height of the group? I want my “…” to be at the very bottom of the group. So basically this:

If I used a constant number of words then in the second group, for example, I would have this:

Any ideas? Thanks

1 Like

@paul29 With the new responsive engine you can set the group to have a minimum height and set height to fit content. Does this work for you?

Thanks for your help but no, not quite. That doesn’t put the … in it and the text box will just get skinnier and skinnier while getting taller and taller.

I figured it out with some css. You have to set the max height of the text element and then put the following in an html element:
< style>
#textBoxID{
overflow: hidden !important;
text-overflow: ellipsis !important;
}
< /style>

(don’t include the spaces in the style tags, I just put them here so they show up in this post)

Where textBoxID is whatever you have in the id field of your text element:
image

1 Like

Ah yes, sorry I left that out … glad you sorted it, there’s definitely some trial and error needed.

1 Like