"Cut off Content" per character instead of per word

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:

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 ":

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

14 Likes

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

1 Like

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

Works perfectly, thank you!