: 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:

@Hamm6457569

Posted in: #Css #Html #WebsiteDesign

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:





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: 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!

Vote Up Vote Down

Login to post a comment!