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 认为它们是牢不可破的（即使它们确实有逗号等）），除了? 之外，我还想使用word-break: break-allor吗？word-wrap: break-wordwhite-space: pre-wrap

4

2 回答 2

9

word-break：break-all its break the sentence and text in other line 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>

于 2015-02-24T06:17:14.497 回答
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;
}

输出

在此处输入图像描述

于 2015-02-24T06:33:09.853 回答