移动端英文长单词换行为何导致布局收缩？检查 word-break 属性
移动端网页中英文长单词溢出容器时，通过 word-break: break-all 属性可强制在任意字符间换行，防止布局收缩。
检查 word-break 属性的取值与默认行为
移动端网页中英文长单词或 URL 溢出容器时，默认情况下浏览器会尝试保持单词完整，导致内容超出容器宽度而不换行，从而挤压周围元素或触发横向滚动条，使页面布局出现收缩现象。根据 CSS 规范，word-break 属性用于设置换行规则，默认值为 normal，此时浏览器遵循默认的换行规则，通常不会在单词内部强制断行。
要排查此问题，首先检查目标元素的 word-break 属性是否设置为 normal。如果未显式设置，则继承父级样式。此时可以尝试将 word-break 设置为 break-all，该值会在任何两个字符之间插入换行，以防止文本溢出内容框，但会破坏单词的完整性。MDN 文档指出，word-break: break-all 适用于防止溢出，且在非中日韩文本中会强制断行。
使用 break-all 值强制换行防止溢出
当发现长单词导致布局收缩时，应将 word-break 属性设置为 break-all。此操作会告诉浏览器在文本溢出容器之前，在任意两个字符之间插入换行符，从而确保文本适应容器宽度。MDN 示例中展示了使用 break-all 后，长单词如 Honorificabilitudinitatibus 能够被拆分显示，不再导致溢出。
在移动端调试时，可以通过开发者工具或直接在样式中添加 word-break: break-all 来验证效果。如果设置后布局恢复正常，说明问题确由换行规则引起。需要注意的是，break-all 会破坏单词的视觉完整性，可能影响阅读体验，因此需权衡布局稳定性与文本可读性。
验证换行效果与布局恢复情况
设置 word-break: break-all 后，需验证文本是否正确换行且布局不再收缩。检查步骤包括：在移动端或模拟器中查看目标元素，确认长单词已被拆分到多行显示，且容器宽度未被挤压。如果文本仍溢出或布局异常，可能需要检查容器的宽度设置或 padding 是否导致实际可用宽度不足。
验证结果应表现为：文本完全适应容器宽度，无横向滚动条，且周围元素位置保持不变。如果设置后效果符合预期，说明问题已解决。若仍存在问题，可尝试其他值如 break-word，该值在单词内部断行，但优先保持单词完整，仅在必要时断行。
根据语言特性选择合适的换行策略
不同语言对换行的需求不同。对于英文等非中日韩文本，break-all 是防止溢出的有效手段。但对于中日韩文本，MDN 文档指出 keep-all 值会禁止在这些语言中换行，非中日韩文本行为与 normal 相同。因此，在处理多语言内容时，需根据语言特性选择合适的 word-break 值。
如果网页包含中日韩文本，且希望保持这些文本的单词完整性，可使用 keep-all 或 auto-phrase（实验性）。auto-phrase 会进行语言特定分析，避免在自然短语中间断行。选择正确的值不仅能解决布局问题，还能提升文本的可读性。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。