Assuming that inside a Text module, there is a super long word like, for example UsingAsuperLongWordHere.
While this might look okay on Desktop, on Mobile devices, since the available space where that word can be displayed is much smaller, the browser will try to wrap that word into multiple lines of text.
We can overcome this by using the overflow-wrap property and set it to be normal.
Set the overflow on a specific module
If the title (h1) that has the overflow placed inside a Text module, we can assign a CSS class and set the CSS to prevent that overflow.
Edit the Text module, and in Advanced Tab > CSS ID & Classes > CSS Class, type in
divi-tm-no-text-overflowIn Divi > Theme Options > General Tab > Custom CSS, add this CSS code:
.divi-tm-no-text-overflow h1 {
overflow-wrap: normal;
}The CSS code will target any
h1elements that are inside the module with the class ofdivi-tm-no-text-overflow.
Set the overflow rule globally
Go to Divi > Theme Options > General Tab > Custom CSS
Paste the following CSS code:
h1, h2, h3, h4, h5, h6 {
overflow-wrap: normal;
}
Note: Both solutions should be used together with Divi's Responsive settings and setting a smaller font size on the Phone.