I am trying to wrap a tex (a long URL) within a column BUT the text wrapping doesn’t wrap in appropriate places, instead only at hyphens or spaces. This results in texts being wider than a column that the text is placed in. Is there a way around this. Even when explicitly setting a width, the wrapping is not working correctly. Please see the issue in the video
you can try to add overflow-wrap: break-word in the custom css of the element (at the bottom of the style panel)
remember to set a width for the text element
3 Likes
Do you really want a URL that spans 5 lines?
Set a width on the text field, and then add ‘No-wrap’ and ‘Ellipsis’ to On
Unfortunately i really do, hence the attempt. It’s just weird how the breaking occurs
It’s a UX thing.
Fair enough.
I personally need a masterclass in dynamically sizing elements and ensuring elements don’t overflow when nested inside each other. Its easily one of biggest time traps for me at the moment.
It would be intuitive to think if a child element is place inside a parent element, by default the child elements contents stay within the boundary of the parent element. I’m obviously overlooking some simple principles.
@Joyce tagging you for a potential tutorial on this topic?
2 Likes
word-break: break-all;
overflow-wrap: anywhere;
white-space: normal;
display: inline-block;
and set a max-width:100% for the text element