Truncated text with [...] at the end

Need help Database
1

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
2

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

10 Likes
3

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

1 Like
4

Thank you Mike!

5

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.

6

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

8

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:

image
image715×546 8.81 KB

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

image
image272×524 4.84 KB

Any ideas? Thanks

1 Like
9

@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?

10

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

11

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

1 Like