应使用 overflow-wrap: break-word + white-space: normal + 明确宽度三件套；word-wrap 已废弃，white-space 优先级更高，Flex/表格等特殊布局需额外处理。

word-wrap: break-word 已废弃，现在该用 overflow-wrap: break-word，且必须配合 white-space: normal 才能真正生效。

为什么 word-wrap: break-word 不起作用

浏览器早就不推荐 word-wrap 了，它只是 overflow-wrap 的别名，但部分旧写法在现代 CSS 中容易被忽略或覆盖。更关键的是：即使写了 overflow-wrap: break-word，如果容器同时设置了 white-space: nowrap 或 pre 类行为，换行逻辑会被直接禁用。

• white-space 的优先级高于 overflow-wrap，它是“开关”级控制
• Flex/Grid 容器默认不换行，子元素需额外声明 overflow-wrap + white-space
• 表格单元格（）有特殊渲染规则，overflow-wrap 需搭配 table-layout: fixed 和明确宽度

  正确写法：三件套缺一不可

  要让长单词、URL 或无空格文本自动折行，得同时满足三个条件：

  • overflow-wrap: break-word（不是 word-wrap）
  • white-space: normal（确保允许换行，不是 nowrap 或 pre）
  • 容器有明确的宽度限制（width、max-width，或受父容器约束）

  简短示例：

  .text-box {
    width: 200px;
    overflow-wrap: break-word;
    white-space: normal;
  }

  注意：word-break: break-all 是另一条路——它会强行在任意字符间断行，破坏可读性，别混用。

  

  CSS工具箱(专业版)

  全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

  下载

  在 Flex 布局里特别容易失效

  Flex 项目默认不换行，哪怕你给子元素写了 overflow-wrap，父容器的 flex-shrink: 1（默认值）也可能把内容压缩到最小再溢出，而不是换行。

  • 给 Flex 子项加 min-width: 0，解除 flex item 的最小尺寸保护
  • 确保父容器没设 white-space: nowrap
  • 避免对子项设 flex: 0 0 auto 这类禁止收缩的值

  典型修复写法：

  .flex-item {
    min-width: 0;
    overflow-wrap: break-word;
    white-space: normal;
  }

  兼容性与真实场景差异

  overflow-wrap: break-word 在所有现代浏览器都支持（包括 IE11），但 Safari 对 table-layout: fixed 下的 overflow-wrap 处理不稳定，有时需加 hyphens: auto 辅助触发。

  • 中英文混排时，中文天然可断行，重点防的是英文长 Token、Base64 字符串、URL
  • 服务端返回的 JSON key 名或日志片段，常含下划线+大小写组合（如 userProfileDataV2Response），这类词不会被 break-word 拆开，得靠 word-break: break-word（注意：这是另一个属性，非别名）
  • 移动端 WebView（尤其旧版 Android）可能忽略 overflow-wrap，建议 fallback 加 word-break: break-word

  真正难的不是写对那行 CSS，而是判断当前文本是否“可断”、容器是否“真受限”、父布局有没有悄悄锁死换行能力——这些得看 computed styles，不能只扫一眼代码。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！