word-break CSS属性用法演示

word-break 属性指定如何在单词内断行，与 overflow-wrap 不同，它更积极地控制换行行为。

重要区别：word-break 是主动换行策略，而 overflow-wrap 是被动换行策略（仅在内容溢出时才换行）。
1. word-break: normal (默认值)
这里有一个超长的英文单词：Supercalifragilisticexpialidocious，它会超出容器边界而不是换行。

按语言规则换行，中文在字符间换行，英文在单词边界换行。

2. word-break: break-all
这里有一个超长的英文单词：Supercalifragilisticexpialidocious，它会在容器边界处换行。

允许在任意字符间换行，包括在CJK文本中（这在normal模式下不会发生）。

3. word-break: keep-all
中英文混合文本：Supercalifragilisticexpialidocious 这个单词和中文字符

对于CJK文本（中文、日文、韩文），不允许在字符间换行，保持单词完整性。

4. 三种值的对比
normal
https://www.example.com/very/long/url/that/might/cause/overflow
break-all
https://www.example.com/very/long/url/that/might/cause/overflow
keep-all
中英文混合文本：Supercalifragilisticexpialidocious
5. 中文文本的差异
normal
这是一个很长的中文句子，通常在字符之间可以换行，但会尽量保持语义完整性。
break-all
这是一个很长的中文句子，会在任意字符间换行，可能破坏语义完整性。
keep-all
这是一个很长的中文句子，会尽量保持词语的完整性，不轻易在字符间断开。
6. 与overflow-wrap的比较
word-break: break-all
Thisisaverylongwordwithoutspaces
overflow-wrap: anywhere
Thisisaverylongwordwithoutspaces

word-break: break-all 会主动在任意位置换行，而 overflow-wrap 仅在必要时换行。

CSS 代码：


.normal-break { word-break: normal; }
.break-all { word-break: break-all; }
.keep-all { word-break: keep-all; }

/* 与overflow-wrap的区别 */
.overflow-wrap { overflow-wrap: break-word; }
实际应用场景
与其他换行属性的关系

word-break、overflow-wrap 和 white-space 可以一起使用，它们的优先级和交互关系：