表格中word-wrap: break-word失效，根本原因是table-layout未设为fixed、white-space被继承为nowrap或Flex容器下min-width: auto锁定换行；需同时设置table-layout: fixed、white-space: normal及min-width: 0（Flex场景）才能生效。
表格单元格里 word-wrap: break-word 不生效？先查 table-layout
90% 的表格换行失效，是因为没设 table-layout: fixed。默认的 table-layout: auto 会让浏览器根据内容动态算列宽，此时 word-wrap 被忽略——哪怕你写了也没用。
必须显式给 <table> 加上：
table {
table-layout: fixed;
width: 100%;
}
再配合 td 或 th 上的 word-wrap: break-word 才能真正触发断词换行。别只盯子元素，父表布局才是开关。
white-space: normal 被继承覆盖？检查 computed 样式
即使写了 word-wrap，如果 td 或其祖先元素（比如某个 wrapper <div>）继承了 white-space: nowrap，文本照样不折行。
立即学习“前端免费学习笔记（深入）”；
打开浏览器开发者工具 → Elements → 右侧 Computed 面板，直接搜 white-space，确认最终计算值是 normal。不是靠猜，得亲眼看见。
修复方式很简单：
- 给
td显式加white-space: normal（别依赖默认） - 避免在父级容器上设
white-space: nowrap，尤其不要套在表格外层<div>里
中文、英文、URL 混合场景该选 overflow-wrap 还是 word-break？
中文本身可自然断字，但遇到英文单词、Base64、长 URL 就容易溢出。这时不能一概而论：
-
overflow-wrap: break-word：优先保持单词完整，只在整词放不下时才断开；适合含正常英文的混合文本 -
word-break: break-all：在任意字符处断，包括“用户”变“用/户”；仅建议用于纯英文/数字 ID、日志类字段 -
word-break: keep-all：中文下等效于禁用换行，慎用
推荐组合：
td {
overflow-wrap: break-word;
word-break: normal;
}
Flex 布局嵌套表格？min-width: 0 是隐形杀手
如果表格被包在 display: flex 容器里（比如侧边栏 + 表格），即使 table-layout: fixed 和 overflow-wrap 都写了，文字仍可能溢出。
根本原因是 Flex 子项默认 min-width: auto，它会阻止内部文本收缩换行。
解决方法不是改表格，而是给表格本身加：
<div style="display: flex"> <table style="min-width: 0">...</table> </div>
注意：是给 <table> 加 min-width: 0，不是给 td 或 tr。
表格换行真正的难点不在属性名记不记得住，而在 layout 层级之间互相压制——table-layout 控制列宽逻辑，white-space 决定空格是否有效，min-width 在 Flex 下悄悄锁死换行能力。漏掉其中任何一个，word-wrap 就只是个摆设。
