放入中换行不显示，根本原因是默认white-space: normal折叠换行符；从取值后在表格中还原换行的三种可靠方式是：white-space: pre-line（轻量纯文本）、pre-wrap（保留空格与换行并折行长词）、JS将\n替换为（需先转义防XSS）；前提是必须设置明确宽度（如width或max-width），否则无法触发换行。
为什么 <textarea></textarea> 放进 <td> 里，换行还是不显示？
<p>因为 <code><textarea></textarea> 本身会正确保存和渲染换行（\n），但它的父容器 <td> 默认用 <code>white-space: normal，导致你“看到”的换行其实是 <textarea></textarea> 自身的编辑框行为；而一旦你把内容取出来（比如 textarea.value）再塞进其他地方（如 <div> 或另一个 <code><td>），换行就消失了——浏览器根本不认原始 <code>\n。
从 <textarea></textarea> 取值后，在表格单元格中还原换行的三种可靠方式
<textarea></textarea> 取值后，在表格单元格中还原换行的三种可靠方式核心原则：不是“让 <td> 换行”，而是“让目标容器识别并渲染 <code>\n”。
- 用
white-space: pre-line：最轻量，适合纯文本展示（如后台管理列表预览），\n转成换行，多余空格合并 - 用
white-space: pre-wrap：保留\n和所有空格，同时允许长单词折行，适合用户评论、日志等需格式还原的场景 - 用 JS 替换
\n→<br>：仅当必须用innerHTML渲染且无法改 CSS 时才选；注意要先转义 HTML 实体（如&、）防 XSS，否则有风险
<td> 宽度没设，加了 <code>white-space 也不换行？
对，这是最常被忽略的硬性前提。换行需要“触发条件”：容器必须有明确宽度约束。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<table> 没设 <code>width或table-layout: fixed，列宽由内容撑开，浏览器根本不会尝试折行<td> 上直接写 <code>width: 200px或max-width: 300px才有效；仅靠父级flex或grid不一定传递宽度- 响应式下建议搭配
min-width+max-width，避免小屏被压缩成一列文字挤满 - 推荐组合：
white-space: pre-line+textContent渲染 —— 安全、语义清晰、换行可控 - 若必须用
innerHTML（比如要支持有限富文本），先做两件事：data.replace(/&/g, '&').replace(/, '/g, '>')，再替换\n为<br> - 特别注意：数据库字段里存的是
\r\n还是\n？统一用.replace(/\r\n|\r|\n/g, '\n')归一化，避免跨平台差异
服务端返回含 \n 的字符串，前端怎么安全渲染到表格？
别直接 innerHTML = data，也别盲目信任 textContent（它不渲染换行）。
立即学习“前端免费学习笔记（深入）”；
真正难的不是加哪条 CSS，而是判断「这个换行是语义分隔（该用 <p></p>）」还是「格式还原（该用 white-space）」——表格里绝大多数情况属于后者，但一旦混入链接、强调等结构，就得切回 HTML 解析逻辑。
