推荐使用 overflow-wrap: break-word 而非 word-break: break-all，因其仅在必要时断行、保持单词完整；中英文混排应组合 word-break: keep-all 与 overflow-wrap: break-word。
word-break 和 break-word 到底该用哪个
HTML5 中没有 wordBreak 这个属性，真正起作用的是 CSS 的 word-break 和 overflow-wrap（旧名 word-wrap）。很多人误以为设了 wordBreak: break-all 就能“智能换行”，结果中文正常、英文乱断、URL 被截成无意义片段——问题出在语义混淆上。
关键区别：
-
word-break: break-all：强制在任意字符间断行（包括英文单词中间），适合纯展示场景，但可读性差 -
word-break: keep-all：中文不断、英文单词也不拆，但长英文或 URL 会溢出容器 -
overflow-wrap: break-word：仅在必要时（整词放不下）才在单词内断行，优先保持单词完整，更符合阅读习惯
中文+英文混排时的推荐组合
中英文混排是常见痛点：中文自动换行没问题，但一串英文（比如 API 接口路径、邮箱、哈希值）会撑破容器。单独用 word-break: break-all 会让 fetchData 变成 fe-tchD-ata，不推荐。
稳妥做法是组合使用：
立即学习“前端免费学习笔记（深入）”；
text {
word-break: keep-all;
overflow-wrap: break-word;
hyphens: auto; /* 可选，对英文启用连字符（需语言属性支持）*/
}注意：hyphens: auto 需要父元素有 lang="en" 才生效，且不是所有浏览器都支持（Safari 对 hyphens 支持较弱）。
table 中单元格文字不换行的典型修复
表格默认行为是 white-space: nowrap，尤其 <td> 里塞了长 URL 或日志 ID（如 log_20240517_abc123def456）时，整列会被拉宽甚至横向滚动。
只需给 <td> 加：
td {
word-break: break-word; /* 注意：这里 break-word 是 overflow-wrap 的别名，不是 word-break 的合法值 */
overflow-wrap: break-word;
max-width: 0; /* 关键！配合 min-width: 0 触发 flex/table 内部的最小宽度重算 */
}如果仍无效，检查是否被 table-layout: fixed 锁死，此时需显式设置 width 或 min-width。
JavaScript 动态设置时的坑
用 JS 设置时，别写 el.style.wordBreak = 'break-all' —— 拼写必须驼峰：wordBreak 正确，word-break 会静默失败。
但更隐蔽的问题是：某些框架（如 Vue）的响应式更新可能绕过样式计算，导致首次渲染未生效。建议：
- 用
getComputedStyle(el).wordBreak调试是否真的应用成功 - 避免在
display: none元素上提前设换行样式（计算无效） - 若内容由异步加载，确保样式规则在 DOM 插入前已就绪，或用
requestAnimationFrame延迟一次重排
复杂布局下，单靠 CSS 属性很难覆盖所有边界情况，比如嵌套 flex + grid + 表格混合结构里的超长文本，往往得配合 min-width: 0 或 width: 0 才真正触发收缩换行。
