4

I don't understand why there are two properties that seem to do the same thing, yet their interrelation does not appear to be defined within the spec.

http://dev.w3.org/csswg/css-text-3/#word-break-property

http://dev.w3.org/csswg/css-text-3/#overflow-wrap-property

For example, if I want text wrapped as per How do I wrap text in a pre tag?, and some lines contain strings with no spaces (which seems to make Chrome think they're non-breakable (even if they do have commas and such)), do I want to use word-break: break-all or word-wrap: break-word, in addition to white-space: pre-wrap?

Community
  • 1
  • 1
cnst
  • 25,870
  • 6
  • 90
  • 122
  • 1
    Your question/answer is here: http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break – EternalHour Feb 24 '15 at 05:49
  • `white-space: pre-wrap;` seems to break lines with no spaces in Chrome on my end. [JSFiddle](http://jsfiddle.net/q9gtoz2r/). – Alexander O'Mara Feb 24 '15 at 05:50

2 Answers2

9

word-break: break-allits break the sentence and text in other line word-wrap: break-word` its not break the sentence its break the line and full sentence go to next line without break 

p {
 width:100px;
 word-break:break-all;
 padding-left:20px;
}
div {
 width:100px;
 word-wrap: break-word;
 padding-left:20px;
}
<body>
<p>India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain's Carolina Marin in the final.</p>
<div>India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain's Carolina Marin in the final. </div>
</body>
RAJ
  • 542
  • 3
  • 8
  • So, well, I'll accept this answer, since no new ones could be posted, however, I think `word-wrap: break-word` is effectively a noop here in your example, because you don't have something like `white-space: pre-wrap`, me thinks. The whole thing doesn't seem to be very clearly spec'ed. :-( – cnst Feb 24 '15 at 19:50
5

You can understand this clearly here

<p>
    Oooohhh.AslongaswegoteachotherWegottheworldspinninright inourhands.
</p>
<br />
<p class="break-all">
    Oooohhh. As longaswegoteachother. Wegottheworldspinninright inourhands.
</p>
<br />
<p class="break-word">
    Oooohhh. As longaswegoteachother. Wegottheworldspinninright inourhands.
</p>

css

p{
    width: 200px;
    border: solid 1px grey;
}

.break-word{
    word-wrap: break-word;
}

.break-all{
    word-break: break-all;
}

output

enter image description here

Rasel
  • 5,488
  • 3
  • 30
  • 39
  • 1
    Hm, why is the whitespace in the source text in your first example different from that of the latter two? That doesn't add to the clarity of what you're trying to point out through CSS. – cnst Feb 24 '15 at 19:52