Responsive Link word wrapping issue

[steynv (Steyn)]

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

[samliew (samliew.com)]

Place this in Site Settings > Custom Code > Header Code

<style>
a {
  word-break: break-all;
}
<style>

Works on published site only, not in designer.

[steynv (Steyn)]

Yes, perfect! Thanks, Sam!

[steynv (Steyn)]

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!

[samliew (samliew.com)]

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;
}

[steynv (Steyn)]

Ah… Yes, obviously. Thanks for the swift reply!