1

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!

  • 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 – Zach Saucier Nov 11 '16 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 – Zach Saucier Nov 11 '16 at 17:10
  • 3
    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 '16 at 17:51
3

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? – Balint Sipos Nov 14 '16 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) – Balint Sipos Nov 14 '16 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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