white-space:pre-wrap在表格单元格中不生效的根本原因是缺少宽度约束，需同时设置width/max-width、确保换行符为\n（非）、并兼顾浏览器兼容性。
white-space:pre-wrap 为什么在表格单元格里不生效
直接给 <td> 加 white-space:pre-wrap 常常没反应，不是 CSS 写错了，而是表格默认的 table-layout: auto 和单元格的尺寸约束压制了换行行为。浏览器会优先按内容撑开列宽，而不是让文本在固定宽度内折行。
必须同时设置 width 或 max-width 才能触发折行
没有明确的宽度限制时，pre-wrap 会把所有空格和换行符当字面量保留，但不会主动折行——它只在“有空间限制”的前提下才折。所以关键动作是给单元格或其父列加宽度约束：
- 给
<td>设置width: 200px或max-width: 200px - 或给对应
<col>设置width（更推荐，避免重复写样式） - 若用
table-layout: fixed，必须配合width在<table>或<col>上，否则列宽计算失效
换行符要真实存在，不能靠
标签
white-space:pre-wrap 只响应原始文本中的换行符（\n），对 HTML 的 <br> 无感。后端返回或 JS 插入的内容如果用 <br> 换行，得先转成 \n，或者改用 white-space:pre-line（它会把 \n 和 <br> 都当换行，但会合并多余空格）。
示例：服务端返回字符串 "第一行\n第二行" → 渲染后正常折；若返回 "第一行<br>第二行" → 必须用 JS 替换：str.replace(/<br>/g, '\n')，再塞进 <td>。
立即学习“前端免费学习笔记（深入）”；
IE 和旧版 Safari 的兼容性坑
pre-wrap 在 IE9+ 和 Safari 6.1+ 支持良好，但 IE8 及更早版本不识别，会退化为 normal。如果必须兼容 IE8，只能用 <pre> 包裹内容 + word-wrap: break-word，或者 JS 动态插入 <wbr> 断点——但后者无法保留原始换行语义。
另外，某些安卓 WebView（尤其 4.x）对 table-layout: fixed 下的 pre-wrap 支持不稳定，建议加一行 overflow-wrap: break-word 作为兜底。
真正起作用的是宽度约束 + 换行符存在 + 浏览器支持三者同时满足，少一个都会看起来“没反应”。
