✅ Text wrap and overflow on smaller screens – *SOLUTION*

Community resources Webflow Tips
1

Hey Webflow fam,

I just wanted to share a solution I figured out lately. I always struggled on how to wrap text correctly in Webflow.

1. Then I stumpled over some custom code you need to wrap the text as usual (wraps the text and activates hyphenation):

<style>
.class-name p, a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}
</style>

But when I tried it out on smaller screens the text was still overflowing and I was like: “WHAT THE HECK AM I DOING WRONG??” :smiley:

So for all of those who struggle with the same issue, here comes the solution.

2. If your text is nested inside of a container, just put the max-width of the parent container on 100% instead of a fixed value like 1140px on smaller screens. This should solve the issue.

Hope this was helpful. Maybe someone knows a different solution regarding to this topic. Let’s chat about this. However this logic is still a bit confusing for me, because I thought, when I give the container a max-width of a certain value, for example 1140px, it will automatically behave on smaller screens like 100% and adjust automatically. So this was the last thing I was thinking about.

Best, Leon :woman_mage:t3:

2

Thank you for your styling code, it helped me. Also look closely if you have any slash / in your text, I spent some amount of time before noticing that two long words separated by a slash were preventing my text block to shrink. Indeed: this could be a URL and applying break-word to it would break it. So it seems by default, it preserves URL-looking text. I added spaces before and after the slash and my problem was solved.

3

Line breaking, word breaking and text wrapping can now be controlled directly from the designer. Webflow just updated the designer with it. I recorded a tutorial for it:

If you want to use hyphens: auto you still have to use custom code.