Html 溢出换行和断字的区别？

Difference between overflow-wrap and word-break?

提问by Anselm

What′s the exact difference between overflow-wrap/word-wrapand word-break? And can anybody tell me what′s the better one for breaking very long links? Most people say you should use word-break in combination with overflow-wrapbut it doesn't look very logical. I think using overflow-wrapin combination with word-wrapfor better cross-browser support is the best method. What do you think?

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

采纳答案by karthikr

Quoting from source

引用来源

• word-wrap:The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.

• overflow-wrap: word-wrapproperty has been renamed overflow-wrapin the current draft of the CSS3 Text specification

• word-break:The word-break CSS property is used to specify how (or if) to break lines within words

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

• 溢出包装：word-wrap属性已overflow-wrap在 CSS3 文本规范的当前草案中重命名

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

So, you need word-break in combination with word-wrap, which is the right combination.

因此，您需要将断字与自动换行结合使用，这是正确的组合。

回答by Ben Wheeler

It helps to understand that at this point, word-break: break-wordis really an alias for overflow-wrap: anywhere.

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

word-break: break-wordis officially deprecated; see the CSS Text Module Level 3 Working Draft:

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

For compatibility with legacy content, the word-breakproperty also supports a deprecated break-wordkeyword. When specified, this has the same effect as word-break: normaland overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

为了与旧内容兼容，该word-break属性还支持已弃用的break-word关键字。指定后，这与word-break: normaland具有相同的效果overflow-wrap: anywhere，而不管 overflow-wrap 属性的实际值如何。

The thing to note here is that word-break: break-wordis an alias for overflow-wrap: anywhere, NOTan alias for overflow-wrap: break-word.

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

(word-break: normalis just the default value for word-break, so you can ignore it unless you're setting a different value for word-break.)

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

How do overflow-wrap: anywhereand overflow-wrap: break-worddiffer?

如何做overflow-wrap: anywhere和overflow-wrap: break-word不同？

The only difference in the documentation between the two is that overflow-wrap: anywhereDOES "consider soft wrap opportunities introduced by the word break" when it is "calculating min-content intrinsic sizes", while overflow-wrap: break-worddoes NOT.

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

I guess widths might be more accurate in some cases if it is considering them?

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

回答by Venryx

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

以下是确切的区别：（基于 Chrome v81 中的测试，并通过参考规范确认我的观察）

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

normal（默认）：折叠空白链和换行符；在需要的地方添加换行符
nowrap：折叠空白链和换行符；不添加换行符
pre-line：折叠空白链；在需要的地方添加换行符
pre-wrap：不折叠；在需要的地方添加换行符
break-spaces：与预换行相同，除了能够触发换行符添加的空格
pre：不折叠；不添加换行符

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

注意：如果所选white-space值列出“不添加换行符”，则无法应用以下属性的换行符行为（即忽略）。

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]

normal（默认）：在适合容器的最后一个单词的末尾换行 [如果存在]，否则行保持不变
break-word：在适合容器的最后一个单词的末尾换行 [如果存在]，否则在容器的末尾
break-all：换行在容器的结尾 [可以分割一个单词，即使附近有空格]

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]

normal（默认）：在适合容器的最后一个单词的末尾换行 [如果存在]，否则行保持不变
break-word：在适合容器的最后一个单词的末尾换行 [如果存在]，否则在容器的末尾 [如果存在] -flex 容器]，否则行保持不变
anywhere：在适合容器的最后一个单词的末尾断行 [如果存在]，否则在容器末尾 [与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).

请注意，对于overflow-wrap: break-word（对于为容器留下太长行的任何组合），不间断的行会导致 flex 容器扩展到超出指定的 flex 比率（强制其他 flex 容器收缩以解决过长的内容）。