Adding Ellipse to truncate single-line URL

[jnm528]

Hey everyone!
I have some long URLs on a single line that I want to truncate at the width of the element. However, checking “Cut off content if the element is not tall enough” does not accomplish what I expect.

See below (left element “cut off content…” is checked, right element it is not)

I want to have it look something like “https://www.linkedin.com…” but the underlying dynamic link still be valid.

I tried adding custom ellipsis overflow CSS as follows and that gets me closer but no matter what I do I cannot set the width or max-width of the element in that situation to indicate where to truncate and add the “…” I thought I wouldn’t need to indicate that since it would inherit the width from the (responsive) parent element.

Anyone have any ideas of how I could solve this? @mikeloc? @romanmg? Am I overthinking this?
Thank you in advance!

[Jici]

Maybe you can use a condition. Is the email:number of character is > 10 (just guessing a number), update text to be email:truncated to 7…
I use 7 because we add … at the end to replace three last character. So this will show 10 or less and if more than 10, 7 characters + …
Does-it make sense?

[jnm528]

Thanks so much for this idea, @Jici! Instead of using Bubble’s native “Recognize links and emails” which I think was screwing this up, I just display the URL as text with the truncation method you suggested then added a transparent link element on top going to the proper dynamic destination.

Thank you again!