表格换行需同时满足：table-layout: fixed（启用换行计算）、white-space: normal（解除换行禁用）、overflow-wrap: break-word（触发长内容断行），缺一不可。
table-layout: fixed 是换行生效的前提
写了 overflow-wrap: break-word 却不换行？90% 是因为没设 table-layout: fixed。默认的 table-layout: auto 会让浏览器根据内容动态算列宽，此时所有换行相关 CSS 都被忽略——不是失效，是压根不进入换行计算流程。
必须给 <table> 加上：
table {
table-layout: fixed;
width: 100%;
}
注意：table-layout: fixed 启用后，列宽由第一行 <td> 或 <col> 的宽度决定；如果没设宽，列宽可能坍缩或不可控。
white-space: normal 必须显式设置
<td> 默认继承自祖先或浏览器 UA 样式，常带 white-space: nowrap，它会直接压制所有换行行为，哪怕你写了 word-break: break-all 也无效。
立即学习“前端免费学习笔记（深入）”；
打开开发者工具 → Elements → Computed 面板，搜 white-space，确认最终值是 normal（不是靠猜）。
修复方式：
- 给
<td>显式加white-space: normal（别依赖默认） - 避免在表格外层
<div>上设white-space: nowrap - 若需保留原始换行符（如后端返回含
\n的文本），改用white-space: pre-line
overflow-wrap 和 word-break 的组合逻辑
中文可自然断字，但遇到长 URL、Base64、无空格英文串时，仅靠 white-space: normal 不够。这时要明确「要不要断」和「在哪断」：
-
overflow-wrap: break-word：只在整词放不下时才断（比如https://a.b/c/d在/处折），适合中英文混排 -
word-break: normal：中文按字、英文按空格/连字符断，语义友好；word-break: break-all会在任意字符间硬切（如“用户”变“用/户”），慎用 - 别用
word-break: break-word：非标准值，Chrome 89+ 忽略，Safari 兼容差
推荐写法：
td {
overflow-wrap: break-word;
word-break: normal;
}
Flex 容器里表格不换行？min-width: 0 是关键
把 <table> 套在 display: flex 容器里（比如侧边栏 + 主表布局），即使 table-layout: fixed 和 overflow-wrap 都写了，文字仍可能溢出。
根本原因是 Flex 子项默认 min-width: auto，它会阻止内部文本收缩以触发换行。
解决方法不是调 <td>，而是给 <table> 本身加：
<div style="display: flex"> <table style="min-width: 0"></table> </div>
这个 min-width: 0 是隐形开关，缺了它，前面所有配置都白搭。
真正卡住换行的，往往不是属性没写全，而是 table-layout: fixed 没开、white-space 被继承覆盖、或者表格被 Flex 包着却忘了 min-width: 0 —— 这三处漏掉任何一项，都会让换行策略完全失效。
