pre标签换行空格失效的根本原因是内容在到达pre前已被html解析器、模板引擎或js处理“吃掉”了换行符和空格；浏览器仅保留已存在的\n、\t和连续空格，不修复缺失或还原转义字符。
pre标签里换行和空格没显示出来，问题不在标签本身
根本原因是内容在到达 pre 标签前，就被 HTML 解析器、模板引擎或 JS 字符串处理“吃掉”了换行符和多余空格。浏览器对 pre 的保留行为只作用于真实存在的 \n、\t 和连续空格节点——它不修复缺失，也不还原被转义的字符。
常见现象包括：
- 后端返回 JSON 字符串，其中
"line1\nline2"在前端console.log看到的是字面量\n，而非真实换行 - EJS 或 Django 模板中写
<pre class="brush:php;toolbar:false;"></pre>，但code被自动 HTML 转义，\n变成普通文本 - 用
innerHTML = "..."动态插入，字符串里含或 <code>>，导致解析中断，后续换行丢失
静态写法必须手敲换行，不能靠拼接
直接在 HTML 文件中写 pre 时，换行和缩进必须是源码里的真实换行符，不是 JS 字符串里的 \n。浏览器解析时才会把它们当独立文本节点保留。
正确示例（复制到 .html 文件中即可）：
<pre class="brush:php;toolbar:false;">第一行
第二行（前面两个空格）
第三行（前面四个空格）
错误做法：
- 写成单行再靠 CSS 强行折行：
<pre class="brush:php;toolbar:false;">第一行 第二行 第三行</pre>—— 这样没有换行符，pre也无从保留 - 在模板里用多行字符串插值却未禁用转义，例如 Vue 的
{{ code }}默认会转义，应改用v-html并确保内容可信
动态插入必须用 textContent，别碰 innerHTML
JS 动态设置内容时，textContent 是唯一能 100% 保证换行符原样进入 DOM 的方式。它绕过 HTML 解析，把字符串当纯文本处理，连 & 都不会被二次解析。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
推荐写法：
const el = document.querySelector('pre');
el.textContent = `line1
line2
line3`;
绝对避免：
-
el.innerHTML = "line1\nline2";—— 若字符串来自用户输入或 API，会被当标签解析，破坏结构 -
el.innerText = ...—— 它会触发重排，且在某些浏览器中会压缩空白
React 中对应 dangerouslySetInnerHTML，但必须配合预转义；Vue 中优先用 v-text 或 textContent 直接操作 DOM。
字体和 CSS 不是可选项，是排版对齐的前提
pre 保留了空格数量和换行位置，但能否对齐，全看字体。非等宽字体（如 Arial、system-ui）会让空格、英文、中文宽度不一致，缩进立刻塌陷。
必须显式设置：
-
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;—— Mac 优先 SFMono，Windows 建议加'Microsoft YaHei Mono'（需确认系统存在） -
white-space: pre-wrap;—— 允许长行自动折行，同时保留空行和缩进；比默认的pre更实用 -
tab-size: 4;—— 控制\t显示为 4 个空格宽；旧版 Safari 需加-moz-tab-size: 4 -
overflow-x: auto;—— 配合pre的不折行特性，确保横向滚动可用
真正容易被忽略的是：这些样式必须生效。检查开发者工具的 Computed Styles，确认 white-space 是 pre-wrap，font-family 最终 fallback 到的是等宽字体，而不是 Times New Roman 或 SimSun 这类变宽字体。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
