Mobile app version of vmapp.org
Login or Join
Hamm6457569

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

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Hamm6457569

1 Comments

Sorted by latest first Latest Oldest Best

 

@Cugini998

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme