table-layout: fixed 是自动换行的前提，必须配合 width 或 max-width 及 white-space: normal 才生效；否则 overflow-wrap: break-word 无效。
table-layout: fixed 是自动换行的前提
不设 table-layout: fixed，overflow-wrap: break-word 就是摆设。浏览器默认用 table-layout: auto，它会根据内容撑开列宽，根本不管你的 max-width 或换行指令。哪怕你给 td 写了十遍 overflow-wrap: break-word，只要父 table 没加这个声明，文本照样横向溢出。
必须显式设置：
table {
table-layout: fixed;
width: 100%;
}
注意：只写 table-layout: fixed 不够，还得有明确宽度（width 或 max-width），否则浏览器仍无法确定“边界在哪”，换行逻辑不会触发。
white-space: normal 必须显式覆盖
很多框架（如 Bootstrap、Ant Design）或全局 reset.css 会悄悄给 td 加 white-space: nowrap，直接锁死所有换行行为。这不是你漏写了样式，而是被继承覆盖了。
打开开发者工具 → Elements → Computed → 搜 white-space，确认最终值是 normal，不是 nowrap 或 inherit。
修复方式很简单：
- 给
td显式写white-space: normal（别依赖默认） - 检查外层
div、th、tr是否也设了white-space: nowrap，一并去掉 - 避免用
pre或pre-wrap，它们会破坏表格默认对齐和内边距表现
overflow-wrap: break-word + max-width 缺一不可
overflow-wrap: break-word 不是“开关”，它是“断点策略”——前提是容器有明确宽度边界。没有 max-width 或 width，它根本不知道该在哪停。
推荐组合（直接作用于 td）：
td {
white-space: normal;
overflow-wrap: break-word;
max-width: 200px; /* 根据列内容合理设定 */
}
如果列宽由 table-layout: fixed 会退化为无效状态。
别混用：word-break: break-all 会在任意字符处断（比如把“订单号”切成“订/单/号”），中文场景慎用；word-break: keep-all 在 URL 场景下等于没设。
Flex 嵌套时 min-width: 0 是隐形必填项
表格放在 display: flex 容器里（比如左右布局的侧边栏+表格），即使上面所有样式都对，文字仍可能溢出——因为 Flex 子项默认 min-width: auto，它会阻止内部文本收缩换行，哪怕你写了 max-width 也没用。
解决方法不是改 table，而是给 td 加：
td {
min-width: 0;
}
特别注意：如果 td 还用了 flex: 1 或类似弹性属性，min-width: 0 依然不可省略。它不是视觉隐藏，而是解除 Flex 的收缩锁定，让换行逻辑真正生效。
最常被忽略的是 white-space 的继承链和 min-width: 0 在 Flex 下的强制作用——这两个点不处理，其他样式全白调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
