移动端长单词换行时为何布局收缩？检查 overflow-wrap: anywhere 的 min-content 计算
当长单词换行时，浏览器会根据换行机会重新计算容器的最小内容尺寸，导致布局收缩。overflow-wrap: anywhere 会在计算 min-content 时考虑这些软换行机会。
检查 overflow-wrap: anywhere 是否导致容器宽度收缩
在移动端网页中，如果设置了 overflow-wrap: anywhere，长单词或 URL 换行后，浏览器会重新计算容器的最小内容尺寸。MDN 资料指出，anywhere 值会在计算 min-content intrinsic sizes 时考虑由换行产生的软换行机会。这意味着，如果长单词换行后占用的宽度小于原始宽度，容器的最小宽度也会相应收缩，导致布局发生变化。
要验证这一点，可以在浏览器开发者工具中选中该元素，查看其计算样式中的 min-width 或 width 属性。如果 overflow-wrap 设置为 anywhere，且长单词换行后容器宽度变小，则说明浏览器正在根据换行机会重新计算尺寸。这种收缩行为可能与预期的固定宽度布局不符，需要进一步调整 CSS 以保持布局稳定。
对比 overflow-wrap: break-word 的尺寸计算差异
与 overflow-wrap: anywhere 不同，overflow-wrap: break-word 不会在计算 min-content 时考虑换行产生的软换行机会。MDN 资料说明，break-word 的行为与 anywhere 相同，允许在无其他可接受断点时将单词断开，但软换行机会不会被考虑在 min-content 计算中。这意味着，即使长单词换行，容器的最小宽度仍会保持原始单词的宽度，不会因为换行而收缩。
在移动端 CSS 中，可以通过设置 overflow-wrap: break-word 来避免布局收缩。例如，在一个固定宽度的容器中，break-word 可能会保持单词完整，导致第一行溢出，但容器的宽度不会因为换行而变小。这种方法适用于需要保持容器宽度不变的场景，但可能会导致文本溢出。
排查其他 CSS 属性是否干扰了尺寸计算
如果设置了 overflow-wrap: anywhere 后布局仍然异常，可能是其他 CSS 属性干扰了尺寸计算。例如，white-space: nowrap 会阻止文本换行，导致 overflow-wrap 失效。MDN 资料提到，normal 值规定行只能在正常单词断点处断开，如果设置了 nowrap，浏览器不会在单词内部强制换行，导致溢出。
可以通过调整容器宽度或输入更长的单词来测试。如果 overflow-wrap 设置为 anywhere，但长单词仍然溢出，可能是容器宽度设置不当或存在其他 CSS 属性阻止了换行。例如，检查是否设置了 white-space: nowrap 或 min-width 属性，这些属性可能会干扰 overflow-wrap 的换行行为。
验证换行效果并确认尺寸计算结果
设置 overflow-wrap 属性后，需要在移动端浏览器中验证换行效果和尺寸计算结果。可以通过调整容器宽度或输入更长的单词来测试。如果 overflow-wrap 设置为 anywhere，长单词应该换行，且容器的宽度应该根据换行机会收缩。如果 overflow-wrap 设置为 break-word，长单词应该换行，但容器的宽度应该保持不变。
MDN 资料提供了一个对比示例，展示了 normal、break-word 和 anywhere 在处理长单词时的不同效果。开发者可以参考该示例，在浏览器中运行代码并观察结果。通过对比不同值，可以确认 overflow-wrap 属性是否正确解决了布局收缩问题，并选择最适合当前布局的值。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。