table-layout: fixed 是 word-break 生效的前提；需配合显式列宽（如 width 或 max-width）且 firefox/safari 旧版需组合 word-break、overflow-wrap、word-wrap；flex/grid 中 table 需设 min-width: 0。

table-layout: fixed 是 word-break 生效的前提

不设 table-layout: fixed，word-break: break-all 或 overflow-wrap: break-word 在 <td> 里基本无效。浏览器默认用 auto 布局，会先按内容撑宽列，再考虑换行——结果就是整列被拉长，文字还是不折。只有 <code>table-layout: fixed 强制表格按设定宽度分配列宽，后续的断行策略才有作用对象。

必须配合显式列宽或 max-width

光写 table-layout: fixed 不够，还要给列指定宽度约束，否则浏览器仍可能把所有空间分给一列：

• <th> 或 <code><td> 上加 <code>width（如 width: 200px）或 max-width
• 用 CSS 类统一控制：td.log-id { width: 180px; word-break: break-all; }
• 若用百分比，确保父 <table> 有明确宽度（如 <code>width: 100% 或具体值）

  Firefox 和旧 Safari 需要兜底写法

  Firefox 早年对 word-break 在表格中支持弱；旧版 Safari（≤15.6）对 overflow-wrap 解析不稳定。稳妥做法是组合声明：

  

  Douyin Keyword Collector

  通过浏览器自动化访问抖音首页，在搜索栏输入关键词并在自动化流程中收集相关关键词建议

  下载

  td {
    table-layout: fixed;
    word-break: break-all;
    overflow-wrap: break-word;
    word-wrap: break-word; /* 兼容 IE/Safari 旧版本 */
  }

  注意：word-wrap 是废弃别名，但保留兼容性，不能省。

  Flex/Grid 容器里的 table 会失效？检查 min-width

  如果 <table> 放在 <code>display: flex 或 display: grid 的父容器中，即使写了上述全部，仍可能不换行——因为 Flex Item 默认 min-width: auto，会阻止收缩。必须额外加：

  table {
    min-width: 0;
  }

  或者更直接：table { width: 0; min-width: 100%; }，强制它尊重父容器宽度边界。

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