Text appearance (...) in a fixed width text container

Hello, I’m sure this is very basic and I’m over complicating it.
I Have text of various length I would like to show in a repeating group, in the context of responsive design.
To avoid overlapping, I use the condition
“When page width < 768” : width = 100px
But when the text is too long it do not appear anymore so I use the condition :
Capture d’écran du 2023-11-19 09-55-06
I truncate the text to fit in,

Capture d’écran du 2023-11-19 09-54-25
Capture d’écran du 2023-11-19 09-54-09

It works but I’m sure It can be done with simple layout parameter,
What do you think ?

That is the answer :face_with_peeking_eye:
Capture d’écran du 2023-11-19 14-39-03

That does work. Another approach which I prefer is to set the max height to just more than the font size (for example font size is 16 I put max height to 20)…this way I am never restricting my width, and just restricting the height, which is the variable component of the design of the text element that would likely cause my list design to not be uniform if one text is longer than others.

When you do this, Bubble automatically truncates and adds the … to the end of the text value.


Hello, thank you for your answer, actually I chose to use the %, so I don’t have to use the “When page width < 768” condition…
I ll try what you said because I still have some text that disappear on mobile,
and some other don’t for no apparent reason.

In fact if I have 2 different texts size (in number of chars), the shorter still disapears on mobile while it put the … on the longer one !

I do not remember having faced that kind of issue before !!

I ll check with a higher height, but I dont want a double line on some cells for aesthetic reason…

I noticed also that if I use the %, if I have a condition “If this text is Hovered” : Bold, the missing part after … appears on the line after! With a height fixed to 20px for instance, which I think is really a bug

I understood what was wrong with me;
If the string is made of many words separated by spaces, it works, it truncates the sentence at some space to put the …, at some blank spaces !
But if it is one long string like aaaaaaaaaaaaaaaaaaaaaaaaaa, it simply disappears because there are no spaces!

1 Like