Truncate text with ellipsis when word is too long

[nazostro]

Hello!

I am sure there’s tons of these already - I found a few but they’re from 2019-2022, but we recently (last year) got a massive update to Bubble.io that I am not aware of (what features).

Has anyone figured out how to keep the text displayed when the text box is set to a max width, but the text will exceed that width?

IE: If it’s multiple words it stays, but if it’s a single word then it disappears.

Sample: thisisaverylongwordwithabsolu… (normally this would disappear)

Edit 1: On the backend when building the app it displays, but the moment I refresh the preview of the page then it disappears there.

Many thanks!!

[startups.victor]

Add a condition to the text:

When “Dynamic text” number of characters > 20 (for an example)

Properties: Text
“Dynamic text” truncate to 20

[nazostro]

Hey @startups.victor, thank you for the help! Took me a minute to get it figured out, but hoping this is how it should look.

Note: As for Current User in the dynamic text, that will technically be other usernames but figured it’s worth trying for now as a test.

1:

2:

[startups.victor]

Absolutely! Yes, that’s correct.

and you can adjust the “20” to suit your design requirements

Please mark this as the solution so others can see it as well.

Cheers

[ihsanzainal84]

If you already know the size of your fonts and the number of lines you want to allow, you should set a text max height instead.

Cleaner, no conditions and the ‘…’ gets appended automatically. Then your users know that the text continues.

[ihsanzainal84]

I thought I’d share the screenshots here for others too.

The above images shows 3 text elements. One with no max height, another with 75px max height, another with 21px max height.

Bubble already adds a CSS style for text to automatically append the ‘…’ if text exceeds it’s max width/height.

Here’s the property editor for the 75px max height. It will still work with “Fit height to content” enabled. Just take note that the max height of your text (or any element for that matter) will also be affected by its parent group’s height.

[nazostro]

Love this solution, but I am still having troubles if the word doesn’t have any spaces

Example Text: HiThisWillNotWork123

Editor:

Site Preview:

If there were spaces then yes it could work with your method

[ihsanzainal84]

This is just how HTML text elements are with long words. Bubble or not. You’re going to have either use the truncate solution, or mess with some CSS/HTML.

I just ignore this in most situations since i it’s just edge cases. Not worth the time IMO.