pre标签内容不显示换行，根本原因是字符串中缺乏真实换行符 ；需确保后端返回、json解析、js赋值（用textcontent）、css样式（white-space: pre; monospace字体）全程保持换行符不被转义或折叠。

pre标签内容不显示换行，先检查字符串里有没有真实

浏览器不会把字符串字面量"line1 line2"里的 自动解释为换行符——它只对 DOM 文本节点中真实存在的换行控制符起作用。常见错误包括：

• 后端返回 JSON 时，换行符被双重转义成"line1\nline2"，JS 解析后得到的是含字面量 的字符串，不是真实换行
• 用innerText = str写入：会折叠所有空白， 和空格全变单个空格
• 从<input type="text">读值：它不支持换行，别指望能拿到
• 模板引擎（如 EJS、Jinja2）默认 HTML 转义，把原始 当成普通字符输出

验证方法：console.log(JSON.stringify(yourString))——如果看到"line1\nline2"，说明还没还原；如果看到"line1 line2"，说明已含真实换行。

动态注入必须用textContent，别碰innerHTML

textContent直接塞纯文本，保留所有 、制表符和连续空格；innerHTML会触发 HTML 解析，把 当普通字符，还可能引入 XSS 风险（尤其对不可信内容）。

• ✅ 正确：preEl.textContent = apiResponse.logText
• ❌ 错误：preEl.innerHTML = apiResponse.logText（除非你手动把 替换成<br>，但这已脱离pre本意）
• ⚠️ 慎用：preEl.innerText = str——它会 normalize 空白，破坏缩进

若需高亮或加链接等交互，应在<pre class="brush:php;toolbar:false;"></pre>内嵌<code>或<span></span>，再用textContent设内容主体，避免污染格式流。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

CSS 必须显式加固white-space和font-family

pre默认white-space: pre，但很多 reset.css 或 UI 框架（如 Bootstrap）会覆盖它；monospace在中文环境常 fallback 到非等宽字体，导致缩进错位。

• 强制重置样式：pre { white-space: pre; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Microsoft YaHei Mono', monospace; }
• 避免用pre-line：它会合并空格，只留换行，不适合代码类内容
• 长行处理选pre-wrap而非pre：允许折行但保留缩进，配合overflow-x: auto更实用
• 别设width或max-width在pre上——应约束父容器，否则易撑破布局

服务端和模板环节最容易悄悄吃掉空白

空白字符在传输链路上非常脆弱：模板渲染、JSON 序列化、HTTP 响应头编码、甚至 Git 提交时的autocrlf都可能改写 。最隐蔽的问题是：

• EJS 中会 HTML 转义， 变成普通字符；要用或{% raw %}...{% endraw %}
• Jinja2 默认 trim 空白，{% set text = data.text | safe %}才可信
• Node.js res.send()直接吐字符串没问题，但经 Express 的res.render()走模板就可能被处理
• 前端用fetch取 JSON 后，别再JSON.stringify()一遍——那会把 变成\n

真正难的不是加个<pre class="brush:php;toolbar:false;"></pre>标签，而是从数据源头到 DOM 渲染全程守住 和空格的“真实性”。中间任何一环出问题，pre都只是个摆设。

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