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认为它们不可破坏（即使它们确实有逗号和除了word-break: break-all之外，我还想使用word-wrap: break-word或white-space: pre-wrap吗？

Answer 1

单词分解：break-all its break the sentence and text in other line自动换行：break-word`它不会破坏句子它的断行和完整句子转到下一行而不会中断

＆＃13;

p {
	width:100px;
	word-break:break-all;
	padding-left:20px;
}
div {
	width:100px;
	word-wrap: break-word;
	padding-left:20px;
}

＆＃13;

<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>

＆＃13;

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;
}

<强>输出

enter image description here

`word-break：break-all`和`word-wrap：break-word`之间的区别是什么？

2 个答案: