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!

Improve this question
3
  • 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
    Commented 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
    – Zach Saucier
    Commented 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
    Commented Nov 11, 2016 at 17:51

2 Answers 2

Reset to default
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.

Improve this answer
2
  • 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
    Commented 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)
    – Balint Sipos
    Commented Nov 14, 2016 at 13:09
0

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

Improve this answer
1
  • 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
    Commented 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.