引用来源

• overflow-wrap：overflow-wrap CSS属性用于指定浏览器是否可以在单词内换行，以防止在其他不可断字符串太长而无法放入其包含框时发生溢出。
• word-wrap:在CSS3中，word-wrap属性已重命名为overflow-wrap。
• word-break: word-break CSS属性用于指定如何（或是否）在单词中换行

因此，您需要将断字与自动换行结合起来，这是正确的组合。

在这一点上，理解word-break: break-word实际上是overflow-wrap: anywhere的别名是有帮助的。
word-break: break-word已正式弃用;参见CSS文本模块3级工作草案：
为了与旧版内容兼容，word-break属性还支持已弃用的break-word关键字。指定此关键字后，无论overflow-wrap属性的实际值如何，其效果与word-break: normal和overflow-wrap: anywhere相同。
这里需要注意的是，word-break: break-word是overflow-wrap: anywhere的别名，* 而不是 * overflow-wrap: break-word的别名。
（word-break: normal只是word-break的默认值，因此除非为word-break设置不同的值，否则可以忽略它。）
overflow-wrap: anywhere和overflow-wrap: break-word有何不同？
这两个文档之间的唯一区别是，overflow-wrap: anywhere在“计算最小内容固有大小”时“考虑断字引入的软 Package 机会”，而overflow-wrap: break-word不这样做。
我猜宽度可能会更准确，在某些情况下，如果它正在考虑他们？

以下是确切的区别：（基于Chrome v81中的测试，并通过参考规范确认了我的观察结果）

• • 空白**

normal（默认值）：折叠空白链和换行符;在需要的地方添加换行符
nowrap：折叠空白链和换行符;不添加换行符
pre-line：折叠空白空间链;在需要的地方添加换行符
pre-wrap：无塌陷;在需要的地方添加换行符
break-spaces：与预换行相同，但空格可以触发添加换行符
pre：无塌陷;不添加换行符
注意：如果选定的white-space值列出"不添加换行符"，则无法应用以下属性的换行符行为（即忽略）。

• • 断字**

normal（默认值）：在最后一个单词的结尾处换行，以适应容器[如果存在]，否则不换行
break-word：在适合容器[如果存在]的最后一个单词末尾处换行，否则在容器末尾处换行
break-all：在容器末尾换行[可以拆分单词，即使附近有空格]

• • 溢出回绕**（旧版名称：自动换行）

normal（默认值）：在最后一个单词的结尾处换行，以适应容器[如果存在]，否则不换行
break-word：在适合容器的最后一个单词结尾处换行[如果存在]，否则在容器结尾处换行[如果在非灵活容器中]，否则不换行
anywhere：在适合容器的最后一个单词结尾处换行[如果存在]，否则在容器结尾处换行[因此与word-break: break-word相同]
请注意，对于overflow-wrap: break-word（对于任何使容器的行过长的组合），完整的行可能会导致Flex容器扩展超过指定的Flex比率（强制其他Flex容器收缩以解决过长的内容）。

overflow-wrap强调如何处理溢出，word-break强调如何断字。

我尝试了所有的值，以更好地了解他们如何影响最终结果，这是我得到的：
overflow-wrap（例如，word-wrap）：

/*Set dimensions*/
div {
  height: 200px;
  width: min-content;
  max-width: 9em;
}

/*Set overflow-wrap*/
div#normal { overflow-wrap:normal; }
div#break-word { overflow-wrap:break-word; }
div#anywhere { overflow-wrap:anywhere; }
div#anywhere-wo-mincontent { overflow-wrap:anywhere; width: unset; }

/*Set other*/
body { display: flex; }
div { border: 1px solid; display: inline-block; margin: 30px; }
code { text-decoration: underline; }

<div id=normal><code>overflow-wrap:normal</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=break-word><code>overflow-wrap:break-word</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=anywhere><code>overflow-wrap:anywhere</code><br>Most words are short. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=anywhere-wo-mincontent><code>overflow-wrap:anywhere</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>

word-break：
一个二个一个一个
结果：

我自己也注意到：

• word-break: break-all

是最紧凑的选项，但必须小心，因为它依赖于width: min-content;

• word-break: keep-all

是唯一一个将cjk文本（以及其他字母表）保持在同一行上的函数。几乎与: normal;类似，但适用于cjk。

• overflow-wrap: break-word

会在word-break: break-all不合适的极少数情况下使用它，例如Opera Mini。
其他：

• overflow-wrap: anywhere

我没有看到的用例。它还取决于width: min-content;

• x1米11米1x
• • 已弃用**。它还依赖于width: min-content;
• overflow-wrap: normal和word-break: normal

初始值（默认值）
caniuse.com上浏览器支持比较（2023 - 01 - 24）：