"word-break: normal;" 和 "word-break: keep-all;" 有什么区别？"

Question

这两个似乎做的是同样的事情，它们有什么区别吗？ https://jsfiddle.net/pmuub8w1/2/

    p{
          word-break:normal;
   }

   p{
         word-break: keep-all;
    }

- beth

---

https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break"keep-all 不允许在 CJK 文本中断词。非 CJK 文本的行为与正常情况相同。"（CJK = 中日韩）并且有一个更新后的 fiddle。 - Kaiido

在提问之前，请阅读相关文档，正如@Kaiido所引用的那样，该属性的所有可用值都有解释。 - Andrew Li

Answer 1

1. normal: 遵循正常的换行规则，即在单词之间的空格处换行。因此，即使最后一个单词超出容器范围，句子也不会换到下一行，直到下一个单词出现。对于所有文本，甚至包括CJK字符（中文、日文、韩文及其衍生语言），都将执行此操作。
2. break-all: 如果超出边界，则在字符处断行，这意味着一个单词本身将被分开并移到第二行。因此，假设ALongWord在AL处超出边界，则break-all将使其余的ongWord进入第二行。这不适用于CJK字符。
3. keep-all: 除了CJK字符外，按照正常的换行规则进行换行。它类似于normal，但在CJK的情况下，它不会断行（既不像normal那样按照行规则断行，也不像break-all那样在字符处断行）。

以下是Mozzila文档中示例的屏幕截图。 请注意非CJK和CJK句子处理方式的差异。

- 11thdimension

---

我正在努力弄清楚重复现有文档的目的。 - user663031

它被重新表述并加入了一些额外的词语来解释文档，因为文档本身不够清晰。 - 11thdimension

感谢11thdimesnion的帮助，非常直接简单，否则我就不知道什么是CJK了。 - beth

请注意，这个存在的原因是CJK通常不带空格。在这种情况下，“normal”的行为是可以接受的默认值，但有时并不理想。 - polm23

Answer 2

另一个答案提到了重要的部分：对于非CJK文本，normal和keep-all是相同的。然而，关于CJK文本行为的描述是错误的。

在normal中，CJK可以在任何地方断行。这是因为CJK通常不使用空格，所以在任何位置断行都是可以接受的（即使不完美）。在屏幕截图中，本当是一个单词，但它在最后一行的开头被分成两半。

在break-all中，非CJK文本可以在任何地方断行，与normal中的CJK文本相同。

在keep-all中，CJK文本的工作方式与其他脚本中的文本在normal中的工作方式相同 - 也就是说，如果有一行很长且没有任何空格，它可能会溢出容器。如果您想让CJK文本换行，必须手动插入空格。当与零宽度空格结合使用时，这可以用于在自然单词边界处创建换行符。在屏幕截图中，由于日语文本没有空格，因此它与英语中的长单词一样处理，并且溢出容器。

- polm23