CODEWITHSUNDEEP
csswebkitmobile-safari
Alvarez
Alvarez

Reputation: 1333

How to break a line? (and safari mobile issue)

I'm very confused about how to break lines. There is word-wrap: break-word and word-break: break-all. Note sure which one is the correct method, I don't care if the word will be cut in the middle. So I actually have 3 questions:

  1. Which one is the correct way to do it
  2. What the difference between word-break and word-wrap
  3. Why safari don't work neither with word-wrap: break-word or word-break: break-all, but with the non-standard word-break: break-word

Upvotes: 1

Views: 915

Answers (1)

bowheart
bowheart

Reputation: 4676

Well, I'm not an expert, but I believe that word-wrap: break-word and word-break: break-word are the same thing.

They both differ from word-break: break-all in that they will try to break words in places that make sense (e.g. when there's a dash in the word) UNLESS the word spreads the entire width of the element, then it will chop the word at the last possible character.

word-break: break-all, on the other hand, will break everything at the last possible character when it reaches the width of the element.

So, which one you use depends on which effect you want. If you really don't care if words are broken in the middle, word-break: break-all will be fine. I have personally only ever used word-wrap: break-word, and I'm pretty sure that's the more conventional one.

I can't answer your safari question. All browsers are just different in how they handle css, and sometimes (annoyingly) you just have to work around it as a developer.

Hope this helps.

Upvotes: 1

Related Questions