textarea中的换行符是\n，td默认不解析\n而合并为空格；需用white-space:pre-line配合innerHTML赋值，并加宽度约束和换行控制。
textarea 里的换行符是 \n，不是 <br>；表格单元格（td）默认不解析 \n，所以直接把后端返回的带 \n 的字符串塞进 td 里，会显示成一行——这是最常踩的坑。
为什么 textarea 的内容放进 td 就不换行了
因为 textarea 是表单控件，它的值天然支持 \n 换行；而 td 是普通 HTML 容器，默认用 white-space: normal，会把所有空白符（包括 \n）当空格合并。你看到的“换行”，其实是 textarea 自己渲染出来的，一复制到 td 就失效。
常见错误现象：
- 数据库存的是
"第一行\n第二行"，前端td.innerHTML = data后仍显示为“第一行第二行” - 用
innerText赋值，\n被当成纯文本字符显示出来 - 误以为在
td里写<br>就能还原textarea效果，结果发现源数据根本没有<br>
td 里显示 textarea 内容：必须配 white-space: pre-line
这是最轻量、最可靠的方案，不用改数据结构，也不用 JS 预处理。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给
td加内联样式或 class：style="white-space: pre-line;" - 确保用
innerHTML赋值（不是innerText），否则\n不会被识别为换行符 - 如果后端返回的是 HTML 字符串（比如含
<br>），得先用 JS 替换成真实\n，再配合pre-line - 别加
pre——它会保留所有空格缩进，破坏排版；pre-wrap也行，但多保留空格一般没必要
长文本（如 JSON、URL）撑破表格？还得加宽度约束
white-space: pre-line 只管 \n，不管超长无空格字符串。用户从 textarea 粘贴一段 base64 或长 URL，照样会把列拉宽。
必须组合使用：
- 给
table加table-layout: fixed - 给对应
col或td设明确宽度，比如width: 200px - 再补上
overflow-wrap: break-word和word-break: break-word（注意不是break-all）
漏掉宽度约束，CSS 换行规则根本不会触发——浏览器优先伸展容器，而不是折行。
想每行加点击事件或不同样式？别用 CSS 换行，用 div + flex
如果需求不止是“显示换行”，而是要让“第一行变红”“第二行可点击”“最后一行右对齐”，white-space 就不够用了——它只是视觉分行，没有 DOM 结构隔离。
正确做法：
- 把原始字符串按
\n拆成数组：data.split('\n') - 用
div包每行，放进td：<div>第一行</div> <div>第二行</div> - 给
td加display: flex; flex-direction: column; - 避免用
p，它的默认margin会让单元格高度失控
这种方案灵活，但成本高一点；多数只读展示场景，pre-line + 宽度控制已经足够。容易被忽略的是：动态内容必须走 innerHTML，且宽度约束不可省——这两点漏一个，换行就失效。
