应使用 overflow-wrap: break-word 代替 word-break: break-word，它仅在单词超宽时语义化断行；需配合明确宽度和 white-space: normal，避免 white-space: nowrap 干扰，表格中还需 table-layout: fixed。
长单词不换行导致容器溢出怎么办
直接用 word-break: break-word 会破坏语义断行，比如把“filename.pdf”切成“filename.pdf”，浏览器实际渲染时可能在不该断的地方硬切。更稳妥的选择是 word-wrap: break-word（CSS3 中已重命名为 overflow-wrap: break-word），它只在必要时才断开超长单词，优先保持原有词边界。
-
word-wrap: break-word：仅当单词长度超过容器宽度时触发断行，保留空格和连字符逻辑 -
word-break: break-all：无视语义，任何位置都能断（慎用，中文也按字切） -
word-break: keep-all：中文不换行，英文仍可能溢出（适合纯中文场景）
为什么设置了word-wrap还是不生效
常见原因是父容器没设宽度限制或 white-space 被覆盖。比如 white-space: nowrap 会直接禁用所有换行行为，哪怕 word-wrap 设了也没用。
- 必须确保容器有明确宽度（
width、max-width或 flex/grid 约束） - 检查是否被
white-space: nowrap、pre或pre-wrap干扰 - Flex 项目默认
min-width: auto，可能撑开容器——加min-width: 0再配合word-wrap
现代写法该用overflow-wrap还是word-wrap
两者目前表现一致，但 overflow-wrap 是 CSS3 正式属性名，word-wrap 是旧别名。所有主流浏览器都支持 overflow-wrap，没必要再写 word-wrap 兼容 IE。
- 只写
overflow-wrap: break-word即可，不用双写 - IE11 及更早版本才需要
word-wrap，现在基本可忽略 - 注意：没有
break-word以外的合法值（normal是默认值，不写也行）
中英文混合场景下的真实表现差异
中文本身以字为单位换行，overflow-wrap: break-word 几乎不起作用；英文单词则依赖此规则。如果一段里既有“下载这个verylongfilenamewithoutspace.pdf”，又有中文说明，得靠 text-overflow: ellipsis + white-space: nowrap 控制溢出显示，而不是指望自动断。
立即学习“前端免费学习笔记（深入）”；
- 纯中文段落：换行靠浏览器默认行为，无需额外设置
- 含超长英文/URL：必须加
overflow-wrap: break-word+ 宽度约束 - 表格单元格（
td）里失效？加table-layout: fixed到table上才能生效
