Hyphenation in Safari

Safari, which version? https://caniuse.com/#search=hyphens

Hi Andrew

Thanks for your response.

It seems to be the current one on the iphones and ipads and macbooks?

Cheers

Russell

Which iphone, ipad and macbook are you testing on that has the issue? Full details will get you the response you need

Sorry Andrew, you are right forgot that might help ??

12.1 for iPhone and iPad and 12.1.1 for MacBook.

Cheers

Russell

I see, I don’t have those devices actually so I can’t test them. Let’s try another approach. Why are you hiding hyphenation and breaking the word mid-sentence, what is the greater problem you are having? Maybe we can solve that once and for all.

Is it that you want the words to line up at the end of each line? Have you tried using text-align: justify for that? I.e. replace this:

p {
    ...
    word-break: break-all;
}

With this:

p {
   ...
    text-align: justify;
}

Hi Andrew

What we are after is stop the words hyphenating over two line the code I added as per above has done the trick on chrome and IE but safari hasn’t worked.

I meant in the bigger picture. I assume you know why your posts are hyphenating, it’s because you or your web developer has added the following rule:

p {
    ...
    word-break: break-all;
}

Hi Andrew

Thank you, no i didn’t, I have picked this job up from another developer, we are designers/trying to learn css!

Where has that been added?

Again thank you for your time I know newbies like me must frustrate people.

Cheers

Russell

I’m not sure where it’s added, but not to worry you can write CSS that overrides it. Go to the “Additional CSS” part of the dashboard and add the following code:

html p {
    word-break: normal;
}

Hi Andrew

Thank you so much for your help that has worked fine on the pages and again thank you, but it hasn’t worked for the posts?

Cheers

Russell

For some reason your additional CSS isn’t coming through to the post page.

This is on the Homepage (correct):

<style type="text/css" id="wp-custom-css">
@media (min-width: 1100px) {
.featured-post {
width: 380px;
height: 380px;
}
.featured-slider {
height: 380px;
}}
html p {
word-break: normal;
}
</style>

This is on the post page:

<style type="text/css" id="wp-custom-css">
@media (min-width: 1100px) {
.featured-post {
width: 380px;
height: 380px;
}
.featured-slider {
height: 380px;
}
body, p,  h1, h2, h3, h4, h5, h6 {
-moz-hyphens: none !important;
-ms-hyphens: none !important;
-webkit-hyphens: none !important;
hyphens: none !important;
}		
</style>

I’m not sure how your theme is set up, but try copying the correct styles to every “Additional CSS” section you can find.

Also try clearing your cache using the caching plugins that are active.

Hi Andrew

I removed the snippet of CSS I had originally added and seems to have solved it hopefully, just checking now!

Thanks again

Cheers

Russell