All Collections
Divi Documentation
How to stop long words to break on mobile devices
How to stop long words to break on mobile devices

Long words used in Titles, or even in paragraphs can create unwanted issues on mobile devices.

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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.

  1. Edit the Text module, and in Advanced Tab > CSS ID & Classes > CSS Class, type in divi-tm-no-text-overflow

  2. In 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 h1 elements that are inside the module with the class of divi-tm-no-text-overflow.

Set the overflow rule globally

  1. Go to Divi > Theme Options > General Tab > Custom CSS

  2. 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.

Did this answer your question?