`word-break: break-all` 和 `word-wrap: break-word` 有什么区别？

Question

我不明白为什么有两个属性似乎做同样的事情，但它们的相互关系似乎没有在规范中定义。

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

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

例如，如果我想要按照 How do I wrap text in a pre tag? 换行的文本，并且某些行包含没有空格的字符串（这似乎让 Chrome 认为它们是牢不可破的（即使它们确实有逗号之类的）），除了 white-space: pre-wrap 之外，我还想使用 word-break: break-all 还是 word-wrap: break-word？

Answer 1

word-break: break-allits break the sentence and text in other lineword-wrap: break-word` 它不是断句而是断行和完整的句子不间断地转到下一行

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>

Answer 2

这个你可以看清楚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;
}

输出

`word-break: break-all` 和 `word-wrap: break-word` 有什么区别？

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

css

pre

word-wrap

word-break