“word-break: break-all”和“word-wrap: break-word”的区别是什么?
当我两个都用的时候，如果它不适合容器，它们似乎就会破坏单词。但是为什么W3C制定了两种方法来实现呢?
当前回答
除了前面的注释之外，浏览器对换行的支持似乎比换行好一些。
其他回答
单词分割:打破所有:
字是继续到边界，然后在换行。
自动换行: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>
至少在Firefox (v24版本)和Chrome (v30版本)中，当应用到表元素中的内容时:
自动换行:break-word
实际上不会导致长单词换行，这会导致表超出其容器的边界;
单词分割:打破所有
将导致文字的包装，和表适合在其容器内。
jsfiddle演示。
从各自的W3C规范(由于缺乏上下文，这些规范非常不清楚)可以推断出以下内容:
break-all: break-all用于将CJK(中文、日语或韩语)文字中的外来词、非CJK(即西方)词拆分。 break-word是在非混合语言(让我们说纯西方语言)中进行分词。
至少，这是W3C的意图。实际发生的是浏览器不兼容的结果。这里有一篇关于所涉及的各种问题的优秀文章。
下面的代码片段可以作为如何在跨浏览器环境中使用CSS实现换行的摘要:
-ms-word-break: break-all;
word-break: break-all;
/* Nonstandard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
CSS中的分词属性用于指定当一个单词到达一行末尾时应该如何分词或分词。换行属性用于拆分/换行较长的单词并将它们换行到下一行。
“word-break: break-all;”和“word-wrap: break-word;”的区别:
word-break: break-all;:用于在任意字符处进行换行，防止字符溢出。
word-wrap: break-word;:用于在任意点打断单词，以防止溢出。
Word-wrap: break-word最近更改为overflow-wrap: break-word
将长词换行到下一行。 调整不同的单词，使它们不会在中间断裂。
单词分割:打破所有
不管它是一个连续的单词还是许多单词，都在宽度限制的边缘将它们分开。(即即使是在同一个单词的字符内)
因此，如果您有许多固定大小的跨度，可以动态获取内容，您可能只喜欢使用换行:断字，因为这样只有连续的单词在中间被打断，如果它是一个包含许多单词的句子，则调整空格以获得完整的单词(单词中没有中断)。
如果无所谓的话，随便选一个。
