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

Question

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

4

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

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

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

例如，如果我想要像如何在pre标签中换行文本一样包装文本，并且某些行包含没有空格的字符串（这似乎使Chrome认为它们是不可打破的（即使它们有逗号等）），那么除了white-space: pre-wrap之外，我应该使用word-break: break-all还是word-wrap: break-word？

- cnst

1

你的问题/答案在这里：https://dev59.com/iXI-5IYBdhLWcg3wj5FG - EternalHour

在我的电脑上，white-space: pre-wrap; 在 Chrome 中似乎会在没有空格的情况下断行。JSFiddle。 - Alexander O'Mara

2个回答

5

您可以在这里清楚地理解这个问题。

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

输出

图片描述

- Rasel

1

嗯，为什么你第一个例子中源代码的空格与后面两个不同呢？这并没有增加通过CSS表达你想要指出的内容的清晰度。 - cnst

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RAJ · Accepted Answer

word-break: break-all会将句子和文本断开并放在其他行上。word-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>