Text over running container on phone

I’m trying to stop text on a mobile running out of the container but whenever I try this it doesn’t work.

I’m using this but the text still over runs:

.container { 
    white-space:normal; }

If I change it to this then half of the text is missing

* { 
    white-space:normal; }

Removing the overflow:hidden; from * gives the same results as it does when I add the code to the container class

Perhaps the container itself is too wide and the text is just doing its job and flowing until the edge of its container.

It’s likely that your overflow:hidden; is just trying to mask the issue.

If your text is one long word, where it’s having trouble breaking apart, perhaps you should look into word-break, but more likely, your container just is too wide and the text is just doing what it should. Your overflow:hidden; attempts are likely a band-aid fix.

Could we get some sort of live demo, or some sort of demo that showcases this issue, so we can replicate it and do testing on it?

Thank you, there was a hidden style (way down in the code) that was forcing the width of the container. I changed it for mobiles and now it works perfectly even without the overflow


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.