Adding Ellipse to truncate single-line URL

jnm528 · 2020-05-21T00:07:59.306Z

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)

Screen Shot 2020-05-20 at 4.50.38 PM837×238 15.8 KB

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.
Screen Shot 2020-05-20 at 4.58.59 PM

Screen Shot 2020-05-20 at 4.58.29 PM731×129 10.3 KB

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

Jici · 2020-05-21T00:11:12.378Z

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 · 2020-05-21T00:44:43.543Z

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!

system · 2020-07-30T00:08:00.434Z

This topic was automatically closed after 70 days. New replies are no longer allowed.