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


t team


d technolog

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!

  • 2
    I'm voting to close this question as off-topic because this has nothing to do with design and is solely a programming issue. As such, it should be on StackOverflow Nov 11, 2016 at 17:10
  • It also doesn't do a good job of creating a minimal demo of the issue that is easier to help debug Nov 11, 2016 at 17:10
  • 4
    CSS implementation is perfectly on topic as far as I'm aware. The CSS tag excerpt reads "Ask anything related to implementing styles..." I see no reason why CSS based typography (which this certainly is) should be off-topic.
    – Cai
    Nov 11, 2016 at 17:51

2 Answers 2


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.

  • Thanks for getting back to me Manly. I have disabled all CSS that you mentioned above but we are not closer to a solution unfortunately: prntscr.com/d73z03 So now the headline does not break at all and I don't see any other styling that is affecting it. (you can take a look yourself at: idioplatform.com/about) any advice? or am I doing the wrong thing here? Nov 14, 2016 at 12:54
  • Ahh I discovered what the issue is. It has nothing to do with word-breaks at all. Such a stupid thing. The whole headline is technically one word because there is a non-breaking space between the 2 words. The wordpress theme I am using puts a &nbsp; here: <span style="color: #3fa9f5;"> team</span>. But if I add the space after the first word no non-breaking space is added. (facepalm) Nov 14, 2016 at 13:09

On coderwall example about Adding a line break between two inline elements https://coderwall.com/p/zvz52g/adding-a-line-break-between-two-inline-elements

  • Hello John. Could you please give us a quick summation of the actual solution in your post? Links rot quickly these days, and we want this post to be useful for later visitors as well. Thanks!
    – Vincent
    Oct 16, 2020 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.