What's the difference between `word-break: break-all` and `word-wrap: break-word`? [duplicate]

问题

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?

回答1:

word-break: break-allits break the sentence and text in other lineword-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>

回答2:

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

来源：https://stackoverflow.com/questions/28688767/whats-the-difference-between-word-break-break-all-and-word-wrap-break-word

标签

css

css3

word-wrap

pre

word-break