Responsive ellipsis text truncated by character - not word (simple CSS tweak)

sudsy · 2025-01-08T04:32:41.080Z

After seeing this post and this clever solution, I wanted to give it a go, as it appears to be a common request on the forum.

It seemed like it should be doable with just CSS, and indeed, it turned out to be pretty straightforward…

trunc-text-by-char

Text Element Settings

Make sure Fit width to content is not enabled
Make sure it has no Fixed or Max height
If parent is a Column container, make sure Fit height to content is enabled (on the text element)

Then just target the text element via CSS selectors in whatever way you choose (it’s done using an id in the snippet below), and add the following CSS properties:

#my-text-element {
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

I discovered this approach was already mentioned in this tip, but that was for the old responsive engine, so consider this post an update and confirmation that it works with the new responsive engine.

(And by the way, that’s actually some dude’s real name in the screenshot. )

lindsay_knowcode · 2025-01-08T07:27:50.160Z

Very nice tip

J805 · 2025-01-08T07:33:46.407Z

Hey @sudsy

Glad to see the update. Thanks for the post.

J805 · 2025-01-08T07:36:01.177Z

sudsy:

And by the way, that’s actually some dude’s real name in the screenshot. )

And that is apparently the shortened name for him.

IMG_21531179×2556 408 KB

ed19 · 2025-03-05T11:16:24.396Z

Came looking to see if there was some obvious native solution to this I’ve been missing, apparently not the case!

I’m an old CSS head so this kind of declaration isn’t an issue for me, but the fact that you have to do it for something so simple blows my mind. I’m pretty sure it used to function normally too, before the new responsive engine (which is overwhelmingly a good thing, don’t get me wrong ).

Hopefully bubble add in a checkbox for this soon, alongside overflow controls on groups, as that’s another simple yet laborious CSS task that shouldn’t really exist.

ed19 · 2025-03-05T11:26:18.680Z

Just to add, I’ve just used exactly this method on a text element, but had to go one child deeper since there’s a sub-div that actually contains the text.

In case anybody else runs into this issue, it’s a small adjustment to select any child div:

#my-text-element div {
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

sudsy · 2025-03-05T17:49:28.151Z

ed19:

there’s a sub-div that actually contains the text

Yeah, Bubble will add an extra div in certain contexts or when specific settings are enabled. For the Text element, this happens when the “Center the text vertically” option is enabled (which I rarely use). In most situations, the additional selector specificity is not needed.

Also, the “old” ellipsis technique still works, but only under certain circumstances with specific layout settings. It does not use CSS though; the text is actually truncated before being rendered.

EDIT

Of course, it should be easy to cover both bases…

#my-text-element,
#my-text-element div {
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
	overflow: hidden !important;
}

Anyway, good catch.

ed19 · 2025-03-06T16:08:19.257Z

Ah that’s really interesting, I didn’t actually know it was setting dependent. I’m lazy so I use centre text vertically then add 1px of padding to the top, rather than using flex controls to make the text actually centred. Far from perfect but it does the job haha