Text chopped off on mobile

Support
#1

Hello

On the following page there are a few words that are getting chopped off on mobile

The word ‘OOUOLYAMTELBELLEMBEM’ keeps being chopped because it is extremely long

How can I make the text on this page wrap on mobile so that it is not cut off while still preserving it’s size?

Login info below

Thanks so much!

#2

Hi Jared,

Thanks for reaching out.

Please add this CSS to your Theme Options > CSS

.single-post .entry-header *, .single-post .entry-content *{
    word-break: break-all;
}

It has to be this way since your content are standard HTML (not builder generated).

Hope this helps.

#3

Thank you for this

Is there a way to modify this code to make it auto hyphenate with dashes before it inserts the line breaks?

This fixed it but it also makes the sentences read strangely if you don’t know the words are being broken up

#4

Hi Jared,

Thanks for updating the thread!

Can you please try this CSS and let us know if that helps!

.single-post .entry-header *, .single-post .entry-content *{
    word-break: break-all;
    hyphens: auto;
}

Please check this article for more help!

Thanks

#5

Hi thank you for this! That didn’t change anything… is there another piece of my css conflicting with it? Is there something else I can do?

Thanks so much!

#6

Hi Jared,

Can you please try important for the CSS. SEEMs it works fine in a browser.

Can you try this CSS

.single-post .entry-header *, .single-post .entry-content * {
    word-break: break-all;
    hyphens: auto !important;
}

Thanks

#7

hmmmm why is this happening on your phone but now mine? I have tried clearing my browser cache etc but still I see no hyphens on safari on my iphone 8

#8

Hi again,

You can try this one instead:

.single-post .entry-header *, .single-post .entry-content * {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
}

Please note that not all the browsers support hyphens. You can also use ­ (soft hyphen) if you know in advance where you want to break.

You can also look out for third party plugins which can add hyphens to your content using JavaScript libraries https://wordpress.org/plugins/tags/hyphenation/ but please note that we cannot provide support for third party plugins or scripts due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script.

Thank you for your understanding.

#9

Perfect this worked thank you so much!

#10

We are delighted to assist you with this.

Cheers!

#11

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