table-layout: fixed 是表格换行的前提，不设则 overflow-wrap: break-word 在 td 中基本无效；必须配合 table-layout: fixed、td 的明确宽度（如 max-width）及 white-space: normal 才能可靠触发换行。
table-layout: fixed 是表格换行的前提
不设 table-layout: fixed，overflow-wrap: break-word 在 <td> 里基本无效——浏览器会优先撑开列宽，而不是触发换行。这是表格默认的自动布局行为导致的，和普通块元素完全不同。
必须显式设置：
- 表格本身加 table-layout: fixed
- 同时给 <td> 或 <th> 设定明确宽度（如 width: 200px 或 max-width: 200px）
- 宽度值不能是 auto 或未声明，否则固定布局失效
overflow-wrap: break-word 和 word-break 的选择逻辑
对中文、身份证号、Base64 等无空格长串，overflow-wrap: break-word 可能不生效——它只在“整词放不下”时才断，而连续中文没有“词”的概念，浏览器认为它是“一个超长词”，但又不满足“放不下”的判定条件。
此时应改用：
- word-break: break-all：强制在任意字符间断，适合技术字段（如 token、哈希值）
- word-break: break-word：已废弃，不要用
- 避免混用 word-break: break-all 和 overflow-wrap: break-word，它们策略冲突，后者会被前者覆盖
white-space: pre-wrap 在表格中要慎用
如果后端返回的文本里自带 \n 换行符（比如用户评论），想保留这些换行 + 允许自动折行，white-space: pre-wrap 确实可行。但它在表格单元格里容易引发两个问题：
- 表格默认 vertical-align: middle，pre-wrap 会让多行内容上下居中错位，视觉割裂
- 若单元格高度受限（如设了 height 或 max-height），pre-wrap 不会截断，而是撑高或溢出
更稳的做法：
- 后端把 \n 替换成 <br>，前端用 v-html 或 innerHTML 渲染
- 或统一走 CSS 换行方案，不依赖原始换行符
Flex 布局嵌套表格时的隐藏陷阱
当表格放在 display: flex 容器里（比如响应式侧边栏+主表结构），即使你给 <td> 加了 overflow-wrap，文字仍可能溢出——根本原因是 Flex 子项默认 min-width: auto，阻止内容收缩。
立即学习“前端免费学习笔记（深入）”；
修复只需一行：
- 给 <td> 加 min-width: 0
- 不要加在 <table> 上，也不要用 overflow: hidden 掩盖问题
- 如果用了 table-layout: fixed，这步仍是必要补充
真正难的不是写哪条 CSS，而是判断当前文本属于哪种类型：是带空格的自然语言？无分隔符的技术字符串？还是含 \n 的用户输入？选错策略，break-word 就像没写一样。
