CSS中的“word-break：break-all”与“word-wrap：break-word”有啥区别
Posted
技术标签:
【中文标题】CSS中的“word-break：break-all”与“word-wrap：break-word”有啥区别【英文标题】：What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSSCSS中的“word-break：break-all”与“word-wrap：break-word”有什么区别 【发布时间】：2010-12-20 04:31:04 【问题描述】：我目前想知道两者之间有什么区别。当我同时使用它们时，如果它不适合容器，它们似乎会破坏这个词。但是为什么 W3C 做了两种方法呢？
【问题讨论】：
【参考方案1】：word-wrap: break-word最近更改为overflow-wrap: break-word
word-break: break-all
因此，如果您有许多动态获取内容的固定大小跨度，您可能更喜欢使用word-wrap: break-word，因为这样只有连续的单词会被中断，如果它是一个包含许多单词的句子，则空格被调整以获得完整的单词（一个单词中没有中断）。
如果没关系，随便选一个。
【讨论】：
为什么不被接受？这个答案对广大用户更有帮助。 CJK 行为仅适用于非常国际化的网站。 简短而甜蜜的回答！虽然您可能想将自动换行更改为溢出换行？ @MarioDS 它适用于“非常国际化的网站”，或者世界上 20% 的人称它们为“网站” @GauravAgarwal：应该注意的是，IE（即使在最新版本中）仍然依赖于旧名称。见caniuse.com/#search=overflow-wrap “接受的答案”符号仅与提问者相关，与当时与她/他相关的答案的正确性相关，仅此而已。预计用户几年后不会再回到他们的问题并查看新答案。投票依靠答案显示社区“接受的答案”。【参考方案2】：The W3 specification that talks about these 似乎暗示 word-break: break-all 用于要求 CJK（中文、日文和韩文）文本的特定行为，而 word-wrap: break-word 是更一般的、非 CJK 感知的行为。
【讨论】：
另请注意，word-wrap 是规范中较新属性“overflow-wrap”的旧名称。 w3.org/TR/css3-text/#overflow-wrap 简单地说：“word-break 指定字母之间的软换行机会……” W3C 规范使用 CLK 文本作为示例，但这并不是其唯一的预期用途。当您希望它们在容器宽度处中断时，通常将word-break 与长字符串（例如 URL 或代码行）结合使用 — 特别是如果容器是 pre 元素或表格单元格，其中 @987654324 @属性may not work as expected.
因为规范仅使用亚洲语言作为示例，而不是作为该属性的唯一预期目的（如 gfullam 所述），这似乎是该答案的主要结论。
word-wrap: break-word -> wont break table ---- word-break: break-all -> 打破表格
请注意，@squareman 提到的 W3C 链接现在是 w3.org/TR/css-text-3/#overflow-wrap-property【参考方案3】：
使用word-break，一个很长的单词从它应该开始的地方开始
只要需要，它就会被破坏
[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live
inside this narrow paragr
aph.
但是，对于word-wrap，一个很长的单词不会从它应该开始的地方开始。
它换行到下一行，然后根据需要被打破
[X] I am a text that
012345678901234567890123
4567890123456789 want to
live inside this narrow
paragraph.
【讨论】：
如果你使用break-word，情况仍然如此。我恼人地发现 word-break 会破坏 url 而不是 word-wrap。两者都使用 break-word 从 css-tricks.com/snippets/css/… 得到它【参考方案4】：
word-wrap 已重命名为 overflow-wrap 可能是为了避免这种混淆。
现在这就是我们所拥有的：
溢出包装
overflow-wrap 属性用于指定浏览器是否可以在单词中换行，以防止在原本不可断开的字符串太长而无法放入其包含框时发生溢出。
可能的值：
正常：表示只能在正常的分词点处换行。
break-word：表示如果行中没有其他可接受的断点，通常不可断的单词可能会在任意点被断。
source.
分词
正常：使用默认的换行规则。 break-all：可以在非 CJK（中文/日文/韩文）文本的任何字符之间插入分词。 keep-all：不允许 CJK 文本的分词。非 CJK 文本行为与正常情况相同。word-break CSS 属性用于指定是否在单词中换行。
source.
现在回到你的问题，overflow-wrap 和 word-break 之间的主要区别在于，第一个决定了 overflow 情况，而后者确定正常情况下的行为（无溢出）。 溢出 情况发生在容器没有足够空间容纳文本时。在这种情况下换行并没有帮助，因为没有空间（想象一个具有固定宽度和高度的框）。
所以：
overflow-wrap: break-word：在溢出的情况下，断词。
word-break: break-all：一般情况下，换行就行。不需要溢出。
【讨论】：
很好的解释。我刚才遇到的一个例子：表格单元格中的长词。overflow-wrap/word-wrap 没有让它们换行。大概是因为没有固定宽度的表格单元格扩展而不是溢出。相反，桌子变宽并与其他元素发生碰撞。另一方面，word-break 修复了它。
@HenrikN table-layout: fixed;（可能与width/max-width一起使用）可以使其与overflow-wrap/word-wrap一起使用，但这取决于具体的用例；就像word-break 可能不是你想要的。【参考方案5】：
至少在 Firefox（自 v24 起）和 Chrome（自 v30 起）中，当应用于 table 元素中的内容时：
word-wrap:break-word
实际上不会导致长单词换行，这会导致表格超出其容器的边界；
word-break:break-all
将导致换行，并且表格适合其容器。
jsfiddle demo.
【讨论】：
使用word-wrap:break-work时可以使用table-layout:fixed使表格不展开
@vesken 我无法让它工作（在 Firefox 26 中）。您能否提供我上面链接的 jsfiddle 的更新版本来说明您的意思？
我通过在表格上添加一个宽度（100%）或将容器的 80px 宽度移动到表格来使其工作。 jsfiddle.net/SDGAX/37 但是表的行为与使用 table-layout:fixed 不同
在 Firefox 中使用 word-wrap 和 pre 标签时也会发生这种行为，除非它们定义了固定宽度。使用word-break 会产生所需的结果。我在上面发布的评论中链接到这个答案，因为它演示了一个常见的用例。
此外，没有宽度的显示内联元素不受“自动换行”的影响，但“换行”仍然有效。【参考方案6】：
有一个巨大的差异。 break-word 只会破坏不适合容器的单词。虽然break-all 会无情地尝试最大化每行的字符数，并且会无情地导致“不必要的断字”，这在 IMO 看起来很可怕。
示例
在 6 个字符宽的容器内以等宽字体呈现字符串 This is a text from an old magazine。
word-break: break-all 的大部分单词都被破坏了，看起来无法编辑：
This i
s a te
xt fro
m an o
ld mag
azine
break-all 所做的是逐行并在每行上放置 6 个字符，直到没有剩余。它会无情地这样做，即使是像“is”这样的两个字母的单词也可以分成 2 行。这看起来非常糟糕，我永远不会用它来呈现文本。
word-wrap: break-word 只会破坏长词：
This
is a
text
from
an old
magazi
ne
break-word 所做的更好。它只会破坏永远无法适应容器宽度的单词。当前行放不下的单词会被简单地推到下一行。因此，在这种情况下，对于一个适合每行 6 个字符的容器，它必须分解一个 8 个字符的单词，例如“magazine”，但它永远不会破坏一个较短的单词，例如“text”。
<div style="width: 100px; border: solid 1px black; font-family: monospace;">
<h1 style="word-break: break-all;">This is a text from an old magazine</h1>
<hr>
<h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div【讨论】：
【参考方案7】：这就是我能找到的全部。不确定它是否有帮助，但我想我会把它添加到组合中。
WORD-WRAP
此属性指定如果内容超出元素的指定渲染框的边界，当前渲染的行是否应该中断（这在某些方面类似于意图中的'clip'和'overflow'属性。）此属性仅当元素具有可视化渲染、是具有显式高度/宽度的内联元素、绝对定位和/或块元素时才应适用。
断字
此属性控制单词中的换行行为。它在一个元素中使用多种语言的情况下特别有用。
【讨论】：
感谢您，因为我正在寻找word-wrap 和 word-break 之间的区别，它们都可以具有值 break-word【参考方案8】：
word-break:break-all：
word 继续边界然后换行。
word-wrap:break-word：
首先，换行换行，然后继续边界。
例子：
div
border: 1px solid red;
width: 200px;
span
background-color: yellow;
.break-all
word-break:break-all;
.break-word
word-wrap:break-word;
<b>word-break:break-all</b>
<div class="break-all">
This text is styled with
<span>soooooooooooooooooooooooooome</span> of the text
formatting properties.
</div>
<b> word-wrap:break-word</b>
<div class="break-word">
This text is styled with
<span>soooooooooooooooooooooooooome</span> of the text
formatting properties.
</div>【讨论】：
【参考方案9】：从各自的W3 specifications（由于缺乏上下文而很不清楚）可以推断出以下内容：
word-break: break-all 用于在 CJK（中文、日文或韩文）字符作品中分解外国的非 CJK（比如西方）单词。
word-wrap: break-word 用于在非混合（让我们只说西方）语言中分词。
至少，这是 W3 的意图。实际发生的是浏览器不兼容导致的重大故障。这里是an excellent write-up of the various problems involved。
以下代码sn-p可以作为一个总结，总结一下如何在跨浏览器环境下使用CSS实现自动换行：
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
【讨论】：
【参考方案10】：除了之前cmets浏览器对word-wrap的支持似乎比word-break好一点。
【讨论】：
【参考方案11】：单词中断和自动换行的定义很容易让你头晕目眩，但是当比较这两者时，特别是这样想它们会容易得多：
首先你可能想使用溢出：自动；同样，您可能想尝试单独使用它的样子：如果您可以容忍需要滚动容器中的文本而不是任意换行位置，那么它可能正是您所需要的。
请记住，在这种情况下，“单词”是一个没有空格的字符串。
word-break: break-all; 在保持任何单词不间断之前，优先考虑最小化浪费的空间，同时避免溢出，因此它永远不会在右边距之外的任何地方换行。它甚至用包含的文本中的空格替换换行符。如果您想尽可能避免滚动并使用足够宽以提高可读性的容器，这很有用：但是，如果您的容器太窄，结果通常不会很令人满意，正如 Drkawashima 指出的那样。
word-wrap/overflow-wrap: 断字； 优先考虑保持任何和所有单词不间断，同时避免溢出，因此如果一个单词太长而不能放在该行的其余部分，它会首先换行并尝试将其余文本放在下一行，即使这意味着离开该行上面只有一个字符。如果您想要最大的可读性同时尽可能避免滚动并使用足够宽的容器，这很有用：否则您可能只想使用 overflow: auto 来代替。
关于自动换行，它并没有真正被取代（并且可能比溢出换行更普遍地被全球使用的浏览器所认可）：它成为溢出换行的别名，因为所有大型浏览器和许多网页虽然最初没有在标准中定义，但已经采用了自动换行。然而，由于广泛使用，在定义 overflow-wrap 时它并没有被丢弃，而是定义为今天的别名，并且由于遗留原因，UA（用户代理，例如 Web 浏览器）必须将 word-wrap 视为溢出包装属性的旧名称别名。因此它已成为 W3C 的事实上的标准，并且不会很快消失（也许当 W3C 标准消失或整个网络被人工智能机器人普遍更新时）。
https://www.w3.org/TR/css-text-3/#overflow-wrap-property
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
【讨论】：
【参考方案12】：overflow-wrap: break-word;
参考
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
【讨论】：
【参考方案13】：CSS 中的 word-break 属性用于指定单词在到达行尾时应如何断开或拆分。 word-wrap 属性用于拆分/打断长单词并将它们换行到下一行。
“word-break:break-all;”之间的区别和“自动换行：断词；”
word-break: break-all;它用于在任何字符处分词以防止溢出。 word-wrap：断词；用于任意点分词，防止溢出。
【讨论】：
以上是关于CSS中的“word-break：break-all”与“word-wrap：break-word”有啥区别的主要内容，如果未能解决你的问题，请参考以下文章