移动端长单词导致布局溢出？用 overflow-wrap 属性修复
移动端页面出现横向滚动条通常是因为长单词或 URL 没有被正确换行，使用 overflow-wrap 属性可以强制浏览器在必要时打断长字符串。
检查移动端是否出现横向滚动条
在手机浏览器中打开目标页面，观察页面内容区域是否出现横向滚动条。如果页面宽度超出屏幕可视区域，说明存在布局溢出问题。通常长单词、连续的数字或未转义的 URL 是主要原因。检查时可以尝试缩小浏览器窗口，观察溢出元素的具体位置。
打开浏览器的开发者工具，切换到移动设备模拟模式。在 Elements 面板中选中溢出的元素，查看其计算后的宽度和父容器的宽度。如果元素的宽度大于父容器，说明内容超出了布局边界。此时需要确认溢出的是普通文本还是图片，因为图片溢出需要使用 max-width 属性处理，而文本溢出则需要使用 overflow-wrap 属性。
使用 overflow-wrap 属性打断长单词
在 CSS 中为溢出的文本元素添加 overflow-wrap 属性。推荐使用 overflow-wrap: break-word; 值，它允许在单词内部任意位置插入换行符，以防止文本溢出。如果希望更激进地打断长字符串，可以使用 overflow-wrap: anywhere;，但要注意这可能会破坏单词的语义结构。对于普通文本内容，break-word 是最安全的选择。
设置属性后，浏览器会检查当前行是否还有空间容纳整个单词。如果没有空间，浏览器会在单词内部任意位置插入换行符，而不是让文本溢出到下一行。需要注意的是，overflow-wrap 属性只对文本内容有效，对图片或块级元素无效。如果图片溢出，需要配合 max-width: 100%; 使用。
验证修复后的显示效果
保存 CSS 修改后，刷新移动端页面，观察横向滚动条是否消失。检查溢出的长单词是否被正确换行，且换行后的文本对齐方式是否正常。如果使用了 overflow-wrap: anywhere;，注意检查换行后的文本是否过于破碎，影响阅读体验。对于 URL 或代码片段，anywhere 可能是合适的选择。
使用浏览器开发者工具的响应式设计模式，调整视口宽度，模拟不同屏幕尺寸下的显示效果。确保在所有测试尺寸下，文本都不会溢出容器边界。如果发现某些特定尺寸下仍然溢出，可能需要结合 word-break 属性进一步调整，但要注意 overflow-wrap 和 word-break 的区别，后者会强制在字符间断行，而前者只在单词无法容纳时断行。
区分 overflow-wrap 与 word-break 的差异
overflow-wrap 属性只在单词无法放置在当前行时才允许断行，而 word-break 属性可以在字符间任意位置断行。如果使用 word-break: break-all;，可能会导致文本过于破碎，影响可读性。因此，在处理长单词溢出时，优先使用 overflow-wrap 属性，只有在特殊情况下才考虑 word-break。
MDN 文档指出，overflow-wrap 属性最初是非标准的 Microsoft 扩展 word-wrap，后来被标准化为 overflow-wrap，word-wrap 现在是 overflow-wrap 的别名。这意味着在旧代码中可能会看到 word-wrap: break-word;，这等同于 overflow-wrap: break-word;。在编写新代码时，建议使用标准的 overflow-wrap 属性，以确保跨浏览器兼容性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。