Text ellipsis solution

Tips
1

Anyone facing annoyance with Bubble’s text element and its limitation with truncation, use this as custom CSS on the text element:

display: -webkit-box;
-webkit-line-clamp: 1; ***SET THIS TO THE LINE COUNT YOU WANT***
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;

just works, no need for conditionals and truncates, that is just not modern development.

If anyone from Bubble sees this, this is something that should have existed already, line clamping and setting overflow settings are important.

6 Likes
2

I love this! Thank you!!! Super. Agree. Bubble needs to work on simple stuff like this.

1 Like
3

Did you try this if your goal was to limit the text to an n number of lines?

1 Like
4

Yeah, I set max height too,

1 Like
5

I think in general we need more CSS settings exposed.

2 Likes
6

Yes, did not work within a rg

7

It should work on rg’s too just tweak a little, tweak max w too

1 Like