在CSS中，“word-break：break-all”与“word-wrap：break-word”有什么不同？

我现在想知道两者有什么不同。 当我使用它们时，如果它不适合容器，他们似乎打破了这个词。 但为什么W3C有两种方法来做到这一点？

Answer 1

关于这些问题的W3规范似乎暗示了word-break: break-all是要求CJK（中文，日文和韩文）文本的特定行为，而word-wrap: break-word是更一般的，非-CJK意识到，行为。

Answer 2

word-wrap: break-word最近改为overflow-wrap: break-word

• 将长字包装到下一行。
• 调整不同的词，使他们不中断。

word-break: break-all

• 不pipe它是连续的词语还是多个词，都将它们分解在宽度限制的边缘。 （即使在同一个字的字符内）

所以如果你有很多dynamic获取内容的固定大小的跨度，你可能更喜欢使用word-wrap: break-word ，这样只有连续的单词被打破，如果它是一个包含很多单词的句子，空格被调整以获得完整的单词（在单词中没有中断）。

如果没关系，那就去。

Answer 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. 

Answer 4

至less在Firefox（从v24开始）和Chrome（从v30开始）中，当应用于table元素中的内容时：

word-wrap:break-word

实际上不会造成长词的包装，这可能导致表格超出其容器的边界;

word-break:break-all

将导致文字包装，并将桌子装在其容器内。

jsfiddle演示 。

Answer 5

这是我所能find的。 不知道是否有帮助，但认为我会把它join混合。

WORD-WRAP

此属性指定当内容超出元素的指定呈现框的边界时，当前呈现的行是否应该中断（这与意图中的“剪辑”和“溢出”属性在某些方面类似）。如果元素具有可视化呈现，是具有明确高度/宽度的内联元素，则是绝对定位的和/或是块元素。

WORD-BREAK

该属性控制单词内的换行符。 在元素中使用多种语言的情况下特别有用。

Answer 6

为了避免这种混淆， word-wrap已经被重命名为overflow-wrap 。

现在这就是我们所拥有的：

溢出包装

overflow-wrap属性用于指定浏览器是否可能在单词内部断开连线，以防止在其他不可破解的string太长而不能包含在其包含的框中时发生溢出。

可能的值：

• 正常 ：表示线路只能在正常的单词断点处断开。

• 断字 ：表示如果行中没有其他可接受的断点，通常不可破的单词可能会在任意点断开。

来源 。

字断

word-break CSS属性用于指定是否在单词中打破行。

• 正常 ：使用默认换行符规则。
• break-all ：非CJK（中文/日文/韩文）文本的任何字符之间可以插入字符间隔。
• 保持一切 ：不要让中日韩文字分词。 非CJK文本行为与正常行为相同。

来源 。

---

现在回到你的问题， overflow-wrap和word-break之间的主要区别在于，第一个决定溢出情况的行为，而第二个决定正常情况下的行为（没有溢出）。 当容器没有足够的空间容纳文本时，会发生溢出情况。 在这种情况下突破线没有帮助，因为没有空间（想象一个固定宽度和高度的盒子）。

所以：

• overflow-wrap: break-word ：在溢出的情况下，打破这个词。
• word-break: break-all ：在正常情况下，只要打破行末的话。 溢出是没有必要的。

Answer 7

从各自的W3规范（由于缺less上下文而碰巧相当不清楚），可以推导出以下内容：

• word-break: break-all是为了打破CJK（中国，日本或韩国）字符作品中的外国，非CJK（如西方）字。
• word-wrap: break-word是一个非混合（让我们说是纯粹西方）的语言。

至less，这些是W3的意图。 究竟发生了什么事情，结果导致浏览器不兼容。 这里是涉及的各种问题的优秀报告 。

下面的代码片段可以作为如何在跨浏览器环境中使用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; 

Answer 8

word-break:break-all ：

单词继续边界，然后换行换行。

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> 

Answer 9

除了以前的评论，浏览器对word-wrap支持似乎比word-break更好一些。