Are you having trouble getting your page header text to do what you want on mobile?
I was, too. I want to share something that I learned, and I hope it will help someone else experiencing the same issue.
I was facing two issues:
1. The text would break in the middle of a word. (How stupid is that?)
2. Even when I fixed issue #1 the lines of heading text wouldn’t break where I wanted them to.
Here’s how I fixed issue #1.
The CSS styles in Divi are set to cause a word that’s too long to fit on one line to overflow onto the next line. While you can change the CSS property for word-wrap I found it was best if I just reduced the size of that text on mobile so that no words were too long for a line.
Issue #2.
This is my newest discovery (a little gem hidden in HTML5). Behold, the mighty <wbr>! This little guy lets you specify where you want words to break ONLY when a break is necessary. Isn’t that cool? This way, my lines of heading text neatly remained how I wanted them for desktop and and still broke where I preferred on mobile. See the link for more info about <wbr>. https://www.w3schools.com/tags/tag_wbr.asp
Sent from my Samsung Galaxy smartphone.
