How To Stop Words from Breaking on Mobile in Divi
In this quick tutorial, I show you how to stop your words from breaking on mobile in Divi. It’s a very common occurrence so if you experience it, you’re not alone! Luckily with just one line of CSS and perhaps a few custom tweaks, you’ll be all set in no time.
Hope this quick tip helps!
Here’s an example of how you can use this trick for headings:
h1, h2, h3, h4, h5, h6 {
overflow-wrap: normal;
}
Other tutorials that might help with this:
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Hi, Josh.
Do you know why the layout break occurs when the tablet is viewed horizontally rather than vertically?
mmmm good question. Probably something to do with the width depending on the row/module on horizontal view.
Awesome tip, Josh. Thanks so much!
Thanks, Jason!
Nice Tip Josh.
If this is coupled with a media query to set the max-width to 90vw, will it prevent the overflow by reducing the heading text size?
mmm not sure Donal. Worth a shot!
Hey Josh
I followed the tutorial and when I use the “inspect element” feature to switch to mobile view, most of the text looks good but when I actually pull up the site on my mobile, I see broken words, etc. Am I missing something?
Just be sure to clear your cache or refresh then you should be all set! Sometimes actual phones do appear a little different than inspect element so it does take some fiddling around.
THanks!