Hi all, I’m having an issue that I can’t seem to figure out. I have text within a list that I converted to a link, but for some reason, it doesn’t want to break correctly on smaller devices. It breaks once into 2 lines but then overflows horizontally.
Any ideas on this?
You can check it out here: https://preview.webflow.com/preview/this-pattern?preview=2b743da4f5cffe3192f66cbe2a371aec
Place this in Site Settings > Custom Code > Header Code
<style>
a {
word-break: break-all;
}
<style>
Works on published site only, not in designer.
Yes, perfect! Thanks, Sam!
Hi @samliew, I only realised now that using the code recommended code above, breaks the text in an incorrect way. You will see in the example below that all words at the end of the line breaks into a new line.
Is there a way that I can fix this?
Thanks!
Change break-all to break-word, but then your longer links may be broken up less effectively.
The second option is to override child elements, by adding this
a * {
white-space: initial;
}
Ah… Yes, obviously. Thanks for the swift reply!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.