table-layout: fixed 是表格换行的前提，需配合 width 和列宽约束；td 需设 white-space: normal、word-break 与 overflow-wrap；中英文混排推荐 word-break: keep-all + overflow-wrap: break-word；flex/grid 中需加 min-width: 0 或 overflow: hidden。
table-layout: fixed 是表格换行的前提
不设 table-layout: fixed，word-break 和 overflow-wrap 基本无效。浏览器默认用 table-layout: auto，会根据内容动态撑宽列，根本没机会触发断行逻辑。
必须给 <table> 加上：<pre class="brush:php;toolbar:false;">table {
table-layout: fixed;
width: 100%; /* 或具体像素值 */
}</pre>
<p>同时，每列 <code><td> 要有明确宽度约束（<code>width、max-width 或通过 col 设置），否则即使 layout 固定，列宽仍可能被内容拉伸。
td 里只写 word-break: break-all 不够
单独加 word-break: break-all 在 <td> 上，常被忽略两个关键前提：<ul><li>
<code>white-space: normal 必须显式设置——<td> 默认虽是 <code>normal，但某些框架或重置样式会覆盖它
white-space: nowrap 共存，后者优先级更高，直接禁用所有折行推荐写法：
td {
white-space: normal;
word-break: break-all;
overflow-wrap: break-word; /* 作为兜底，防 break-all 在某些旧 WebView 失效 */
}
中英文混排时别乱用 break-all
word-break: break-all 对中文“友好”，但对英文单词极其粗暴：把 fetchData 切成 fe-tchD-ata，可读性归零。
真实场景更常用组合：
-
word-break: keep-all：锁住中文、日文、韩文不拆字 -
overflow-wrap: break-word：专治英文长串、URL、API 路径，在/、.、-处优先断，不行再切词
例如：
td {
word-break: keep-all;
overflow-wrap: break-word;
}
这样 “测试/test-api-v2.1.0” 就会尽量在 / 和 . 处断，而不是字母缝里硬切。
Flex/Grid 容器里的 td 换行失效？查 min-width
如果表格嵌在 display: flex 或 display: grid 里，子项（哪怕是个 <td>）默认带 <code>min-width: auto，浏览器宁可撑破容器也不缩内容。
修复只需一行：
td {
min-width: 0;
}
或者等价写法：overflow: hidden（副作用是隐藏滚动条，但能松开 min-width 锁）。漏掉这步，其他所有断行属性都白配。
最后提醒：iOS 12 及更早 WebView 对 table-cell 的 word-break 支持不稳定，若需兼容，建议用 div + display: table-cell 替代原生 <td>，并统一加 <code>min-width: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
