单词分割:打破所有:

字是继续到边界，然后在换行。

自动换行: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>

CSS中的分词属性用于指定当一个单词到达一行末尾时应该如何分词或分词。换行属性用于拆分/换行较长的单词并将它们换行到下一行。

“word-break: break-all;”和“word-wrap: break-word;”的区别:

word-break: break-all;:用于在任意字符处进行换行，防止字符溢出。

word-wrap: break-word;:用于在任意点打断单词，以防止溢出。

单词分割:打破所有:

字是继续到边界，然后在换行。

自动换行: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>

讨论这些问题的W3规范似乎表明，word-break: break-all是为了要求CJK(中文、日语和韩语)文本具有特定的行为，而word-wrap: break-word是更一般的、不了解CJK的行为。

单看断字和换行的定义就很容易让你头晕目眩，但当比较这两个词时，更容易这样想:

首先，你可能会使用overflow: auto;同样，您可能想要尝试单独使用它是什么样子:如果您可以容忍需要在容器中滚动文本而不是任意换行位置，那么它可能正是您所需要的。

然后请记住，在这个上下文中，“word”是一个没有空格的字符串。

单词分割:打破所有;

优先减少空间浪费，同时避免溢出，在保持任何文字完整之前，所以它永远不会在任何地方，但在正确的边缘。它甚至在包含的文本中用空格替换换行符。如果你想尽量避免滚动，并使用一个足够宽的容器来提高可读性，这是很有用的:然而，如果你的容器太窄，结果通常不是很令人满意，正如Drkawashima指出的那样。

自动换行/ overflow-wrap: break-word;

优先级保持任何和所有单词不间断，同时避免溢出，因此如果一个单词太长，无法放入该行的其余部分，它会先换行，并尝试将其余文本放入下一行，即使这意味着上面的行短至只有一个字符。如果你想要最大限度的可读性，同时尽可能避免滚动，并使用一个足够宽的容器，这是很有用的:否则你可能只想使用overflow: auto来代替。

关于换行，它并没有真正被取代(也许在全球使用的浏览器中，它比溢出换行更被普遍认可):它成为溢出换行的别名，因为所有的大型浏览器和许多许多网页都已经采用了换行，尽管最初没有在标准中定义。

然而，由于广泛使用，在定义overflow-wrap时它并没有被丢弃，而是定义为今天的别名，并且由于遗留原因，ua(用户代理，例如web浏览器)必须将换行作为overflow-wrap属性的遗留名称别名。因此，它已经成为W3C事实上的标准，而且它不会很快消失(也许当W3C标准灭绝或整个网络被人工智能机器人普遍更新时)。

5.5. Overflow -wrap/word-wrap属性

overflow-wrap (MDN)

除了前面的注释之外，浏览器对换行的支持似乎比换行好一些。