Force line break on mobile – currently it breaks word in half

We’ve recently updated our website. Newer look better forms etc.
However with the new design there is one issues I can’t solve:

Headlines are not getting displayed properly on mobile. And by properly I mean the line break happens in the middle of a word like:

Content Intelligen
e

Or:

Managemen
t team

Or:

Differentiate
d technolog
y

Here is a screenshot of how it looks on the site:

enter image description here

I’ve tried different methods to counteract this but none of them worked.
Here are the details:

Display: block into display: inline

@media (max-width: 560px) {
.rwd-line {display: block;}
}
@media (min-width: 560px) {
.rwd-line {display: inline;}
}

word-break method

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;

overflow method

word-wrap: break-word;
overflow-wrap: break-word;

This is all I had to try.

For an example you can check this page: http://www.idioplatform.com/about/
You will have several headlines here having this issue on mobile.

Can you please help me trying to solve this? It feels I’ve sank way more time in this than it deserved but now I am determined to get it corrected somehow.

Any help if much appreciated!

Answer

You are actually telling the words to break that way in your CSS.

Delete all instances of these and you should be good:

-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
word-wrap: break-word;
overflow-wrap: break-word;

The browser default behavior is to break lines between words. You are actually causing it to break the words, because you specify it in your CSS.

Attribution
Source : Link , Question Author : Balint Sipos , Answer Author : Manly

Leave a Comment