推荐使用 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，尤其 里塞了长 URL 或日志 ID（如 log_20250517_abc123def456）时，整列会被拉宽甚至横向滚动。

只需给 加：

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。