"Cut off Content" per character instead of per word

Tips
1

Bubble’s “Cut off content if the element is not tall enough” is meant to work on a word by word basis. If you have one long string of characters such as an email address this option will hide your text element rather than making it responsive. I saw a couple posts in the forums related to this issue and the suggestion was to use the “:truncated to” option. This didn’t work for me so I developed a workaround which I want to share with everyone.

First create a text style with negative letter spacing to make the letters very close to each other:

pic1
pic11171×550 55.5 KB

Next, add a find and replace function using RegEx on the text element to add a space between every character. Please note that there is a space after the “1”. The replace RegEx is "$1 ":

pic2
pic21041×576 57.9 KB

The result is text that is cut off on a per character basis rather than per word (Notice the different behavior between the names and the emails):
bubble gif

18 Likes
2

I just found myself needing/using this technique. What a silly workaround, but it works! Thanks for sharing. :blush::+1:

1 Like
3

Works great, just do not copy the text out of the text field :slight_smile:

1 Like
4

Works perfectly, thank you!

1 Like
5

Good day! Can we make this somehow work in 2025?
Because the cut off content if the element is not tall enough has vanished.

I made the text component a fixed height, but it’s not working.
Thanks.

6

Another possibility is to do it with HTML ID attribution with this script:

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

you would then only have to paste ‘textnowrap’ into the element ID Attribute.
This code works on one line buttons & text

2 Likes