CSS中overflow-wrap: anywhere与overflow-wrap: break-word的区别及MDN相关规范描述的技术咨询

嘿，这可是CSS里容易搞混的细节问题！我来给你掰扯清楚这俩属性的区别，还有MDN那段描述到底讲的是什么。

首先得说，这俩属性的核心作用是一致的：当一个长单词或无空格的字符串超出容器宽度时，强制在单词内部换行，避免内容溢出容器。

但它们的差异全在元素内在尺寸的计算上，尤其是min-content这个值的计算逻辑：

• overflow-wrap: anywhere：计算元素的min-content宽度时，会把单词内部可以断行的软换行机会算进去。简单说，它会认为这个长单词可以拆成若干行，取其中最宽的那一行的宽度作为min-content。
• overflow-wrap: break-word：计算min-content宽度时，完全忽略单词内部的软换行机会，直接把整个长单词的完整宽度作为min-content的值。

另外还有个小细节：break-word其实是旧规范里的属性值，现在它的行为是依赖于word-break: normal的；而anywhere是CSS3新引入的，行为更独立，不需要依赖其他word-break属性。

要搞懂这段描述，首先得明白什么是min-content内在尺寸：它是元素能收缩到的最小宽度，由内容里“不能被拆分行的最大单元”决定——比如最长的单词、固定宽度的图片，都是这类单元。

MDN说的“仅在计算min-content内在尺寸时，不会考虑由断字引入的软换行机会”，咱们用实际例子来理解：

假设我们有个超级长的单词：Supercalifragilisticexpialidocious，把它放进两个容器里，分别设置不同的overflow-wrap：

.flex-container {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}
.box {
  background: #f0f0f0;
  padding: 8px;
}
.box-anywhere {
  overflow-wrap: anywhere;
}
.box-break-word {
  overflow-wrap: break-word;
}

<div class="flex-container">
  <div class="box box-anywhere">Supercalifragilisticexpialidocious</div>
  <div class="box box-break-word">Supercalifragilisticexpialidocious</div>
</div>

在这个flex布局里，子项默认会根据min-content来收缩：

• 用anywhere的盒子：它的min-content是单词拆成多行后，单行的最大宽度（比如拆成"Supercalifragil"、"isticexpialido"这样的片段，取最宽的那个的宽度），所以盒子会收缩到这个较小的宽度，单词在内部换行。
• 用break-word的盒子：它的min-content是整个长单词的完整宽度，哪怕这个宽度比父容器还宽，盒子也不会收缩到更小，只会在超出父容器时才会换行。

简单总结：break-word在计算元素最小宽度时，依然把长单词当成一个不可拆分的整体；而anywhere则允许把长单词拆成片段来计算最小宽度。

内容的提问来源于stack exchange，提问作者ZYinMD