放入中换行不显示，根本原因是默认white-space: normal折叠换行符；从取值后在表格中还原换行的三种可靠方式是：white-space: pre-line（轻量纯文本）、pre-wrap（保留空格与换行并折行长词）、JS将\n替换为（需先转义防XSS）；前提是必须设置明确宽度（如width或max-width），否则无法触发换行。

为什么 放进 里，换行还是不显示？

因为 本身会正确保存和渲染换行（\n），但它的父容器 默认用 white-space: normal，导致你“看到”的换行其实是 自身的编辑框行为；而一旦你把内容取出来（比如 textarea.value）再塞进其他地方（如

或另一个 ），换行就消失了——浏览器根本不认原始 \n。

从 取值后，在表格单元格中还原换行的三种可靠方式

核心原则：不是“让 换行”，而是“让目标容器识别并渲染 \n”。

• 用 white-space: pre-line：最轻量，适合纯文本展示（如后台管理列表预览），\n 转成换行，多余空格合并
• 用 white-space: pre-wrap：保留 \n 和所有空格，同时允许长单词折行，适合用户评论、日志等需格式还原的场景
• 用 JS 替换 \n →
：仅当必须用 innerHTML 渲染且无法改 CSS 时才选；注意要先转义 HTML 实体（如 &、）防 XSS，否则有风险

宽度没设，加了 white-space 也不换行？

对，这是最常被忽略的硬性前提。换行需要“触发条件”：容器必须有明确宽度约束。

• 没设 width 或 table-layout: fixed，列宽由内容撑开，浏览器根本不会尝试折行
  上直接写 width: 200px 或 max-width: 300px 才有效；仅靠父级 flex 或 grid 不一定传递宽度

  响应式下建议搭配 min-width + max-width，避免小屏被压缩成一列文字挤满

  服务端返回含 \n 的字符串，前端怎么安全渲染到表格？

  别直接 innerHTML = data，也别盲目信任 textContent（它不渲染换行）。

  

  DeepBI DHTML 页面生成器

  生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

  下载

  • 推荐组合：white-space: pre-line + textContent 渲染 —— 安全、语义清晰、换行可控
  • 若必须用 innerHTML（比如要支持有限富文本），先做两件事：data.replace(/&/g, '&').replace(/, '/g, '>')，再替换 \n 为

  • 特别注意：数据库字段里存的是 \r\n 还是 \n？统一用 .replace(/\r\n|\r|\n/g, '\n') 归一化，避免跨平台差异

  真正难的不是加哪条 CSS，而是判断「这个换行是语义分隔（该用

  ）」还是「格式还原（该用 white-space）」——表格里绝大多数情况属于后者，但一旦混入链接、强调等结构，就得切回 HTML 解析逻辑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！