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

Tips
1

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. :astonished:)

6 Likes
2

Very nice tip :+1:t2::+1:t2::+1:t2:

3

Hey @sudsy :wave:

Glad to see the update. :blush::raised_hands: Thanks for the post.

4

And that is apparently the shortened name for him. :exploding_head:

IMG_2153
IMG_21531179×2556 408 KB

1 Like
5

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 :upside_down_face:).

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.

6

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;
}
1 Like
7

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. :slight_smile:

8

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