html - 溢出换行和分词之间的区别？

Question

overflow-wrap/word-wrap和之间的确切区别是word-break什么？任何人都可以告诉我打破很长的链接的更好的方法是什么？大多数人说你应该结合使用分词，overflow-wrap但它看起来不太合乎逻辑。我认为overflow-wrap结合使用以word-wrap获得更好的跨浏览器支持是最好的方法。你怎么看？

Answer 1

从源头引用

• word-wrap: word-wrap CSS 属性用于指定浏览器是否可以在单词中换行，以防止在其他不可中断的字符串太长而无法放入其包含框时溢出。

• overflow-wrap :在 CSS3 文本规范的当前草案中word-wrap已重命名属性overflow-wrap

• word-break： word-break CSS 属性用于指定如何（或是否）在单词中换行

因此，您需要将 word-break 与 word-wrap 结合使用，这是正确的组合。

Answer 2

在这一点上，word-break: break-word它实际上是overflow-wrap: anywhere.

word-break: break-word已正式弃用；请参阅CSS 文本模块第 3 级工作草案：

为了与旧内容兼容，该word-break属性还支持不推荐使用的break-word关键字。word-break: normal指定时，它与and具有相同的效果overflow-wrap: anywhere，而与 overflow-wrap 属性的实际值无关。

这里要注意的是，它 word-break: break-word是 的别名overflow-wrap: anywhere，而不是的别名overflow-wrap: break-word。

（word-break: normal只是 的默认值word-break，因此您可以忽略它，除非您为 设置不同的值word-break。）

怎么做overflow-wrap: anywhere和overflow-wrap: break-word区别？

两者之间文档中的唯一区别是，在overflow-wrap: anywhere“计算最小内容内在大小”时“考虑由单词中断引入的软换行机会”，而overflow-wrap: break-word没有。

我猜在某些情况下宽度可能会更准确，如果它正在考虑它们？

Answer 3

Here are the exact differences: (based on testing in Chrome v81, and confirming my observations by referencing the spec)

white-space

normal (default): collapses whitespace-chains and line-breaks; adds line-breaks where needed
nowrap: collapses whitespace-chains and line-breaks; doesn't add line-breaks
pre-line: collapses whitespace-chains; adds line-breaks where needed
pre-wrap: no collapsing; adds line-breaks where needed
break-spaces: same as pre-wrap, except with spaces able to trigger line-break-adding
pre: no collapsing; doesn't add line-breaks

Note: If the selected white-space value lists "doesn't add line-breaks", the line-break behavior of the following properties is unable to be applied (ie. ignored).

word-break

normal (default): breaks line at end of last word fitting within container [if one exists], else line left unbroken
break-word: breaks line at end of last word fitting within container [if one exists], else at end of container
break-all: breaks line at end of container [can split a word, even with nearby whitespace]

overflow-wrap (legacy name: word-wrap)

normal (default): breaks line at end of last word fitting within container [if one exists], else line left unbroken
break-word: breaks line at end of last word fitting within container [if one exists], else at end of container [if in non-flex container], else line left unbroken
anywhere: breaks line at end of last word fitting within container [if one exists], else at end of container [so same as word-break: break-word]

Note that for overflow-wrap: break-word (as for any combination that leaves lines too long for the container), the unbroken line can cause a flex container to expand beyond the flex ratio specified (forcing other flex containers to shrink to account for the too-long content).