white-space:pre-wrap在表格单元格中不生效的根本原因是缺少宽度约束，需同时设置width/max-width、确保换行符为\n（非）、并兼顾浏览器兼容性。
white-space:pre-wrap 为什么在表格单元格里不生效
直接给 <td> 加 <code>white-space:pre-wrap 常常没反应，不是 CSS 写错了，而是表格默认的 table-layout: auto 和单元格的尺寸约束压制了换行行为。浏览器会优先按内容撑开列宽，而不是让文本在固定宽度内折行。
必须同时设置 width 或 max-width 才能触发折行
没有明确的宽度限制时，pre-wrap 会把所有空格和换行符当字面量保留，但不会主动折行——它只在“有空间限制”的前提下才折。所以关键动作是给单元格或其父列加宽度约束：
- 给
<td> 设置 <code>width: 200px或max-width: 200px - 或给对应
<col>设置width（更推荐，避免重复写样式） - 若用
table-layout: fixed，必须配合width在<table> 或 <code><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>。 <h3>IE 和旧版 Safari 的兼容性坑</h3> <p><code>pre-wrap在 IE9+ 和 Safari 6.1+ 支持良好，但 IE8 及更早版本不识别，会退化为normal。如果必须兼容 IE8，只能用<pre class="brush:php;toolbar:false;"></pre>包裹内容 +word-wrap: break-word，或者 JS 动态插入<wbr></wbr>断点——但后者无法保留原始换行语义。另外，某些安卓 WebView（尤其 4.x）对
table-layout: fixed下的pre-wrap支持不稳定，建议加一行overflow-wrap: break-word作为兜底。真正起作用的是宽度约束 + 换行符存在 + 浏览器支持三者同时满足，少一个都会看起来“没反应”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
