How do I truncate dynamic text which are URLS

Peakster · 2024-10-04T07:05:41.858Z

Hi all,

I need help in truncating dynamic text in a table. The texts are URLS so there are no spaces in the text. I already tried adding css such as:

#truncate-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
}

But that doesn’t do anything. I did also add a fixed heigth etc. to the text but the text just goes invisible.

image815×117 7.6 KB

This is the text I want to truncate, it needs to be limited to 1 line.

Can someone please help me out?

Thanks in advance!

gerbertdelangen · 2024-10-04T09:00:43.393Z

When you set the (max) height and the (max) width for an element, the text will be truncated automatically:

image745×979 46.6 KB

Result:

Ps. the width and height of an element can also be limited by using a (max) width and (max) height on the parent element, f.i. a group.

Additionally you can a limit the number of characters using operators:

image962×380 23.9 KB

image663×717 36 KB

Result:

Peakster · 2024-10-04T09:25:14.724Z

Yeah so this is only valid when there are spaces in the text. If there are none this won’t do it’s job. I also need the width to be like 25% and not fixed with pixels. This also shows really weird behaviour.

In the editor everything looks fine but once I view it outside the edtitor in my /version-test/ it just makes the text invisible which is really weird.

gerbertdelangen · 2024-10-04T09:51:36.084Z

That is weird indeed and might be a bug, you can report a bug here.

Did you try the 2nd solution in my reply?

Peakster · 2024-10-04T10:38:30.069Z

That means it needs to be truncated to a set amount of charachters if I’m right? And that is not what I want, I need it to work in a responsive way with a max width of 20% so to say.

adamhholmes · 2024-10-04T11:06:22.504Z

This is an annoying (and bizarre) property of the Bubble text element… (if contiguous text is too long to fit in a Text element Bubble just ignores it completely, as if it doesn’t exist, and leaves the text element empty.)

Unfortunately there is no native workaround for this (that I know of).

So whenever I need to truncate Contigous text (such as a long URL), which to be honest is fairly often (this is not an unusual requirement), I just ditch Bubble’s Text element completely and use custom HTML to do it.

That way you can have full control over how it displays.

So that would be my suggestion here.

Peakster · 2024-10-04T11:15:31.294Z

Happy to hear that I am not the only one struggling with this! Could you maybe help me out in fixing this with the custom HTML you talked about?

system · 2024-12-13T07:05:54.227Z

This topic was automatically closed after 70 days. New replies are no longer allowed.