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

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: