pre标签本身保留空白符，但内容在到达pre前可能被模板转义、html解析或压缩破坏；应优先用textcontent插入、显式设等宽字体和white-space:pre-wrap、加overflow-x:auto防溢出。
pre 标签本身就能保留空格、换行和制表符，但前提是这些字符真实存在于 DOM 文本节点中——它不修复丢失的换行，也不纠正字体错位，更不兜底处理模板转义或 JS 注入导致的空白丢失。
为什么pre里空格和换行没显示出来
根本不是标签失效，而是内容在到达 pre 前就被“吃掉”了：
- 服务端模板（如 EJS、Django）默认对插值内容做 HTML 转义，
<pre class="brush:php;toolbar:false;">hello\nworld</pre>中的\n会变成字面量\n字符串，浏览器收不到真实换行符 - 用
innerHTML动态写入时，若字符串含或 <code>>未转义，会被解析为标签，破坏原始结构 - HTML 文件被压缩（minified），源码中本就没有换行和缩进，
pre无从保留 - CSS 覆盖了
white-space，比如某 reset.css 设了white-space: normal，直接覆盖掉pre默认的pre值
动态注入内容时pre不保留换行怎么办
问题不在 pre，而在插入路径选错了：
- 绝对优先用
textContent而非innerHTML，例如：el.textContent = "line1\nline2"——它绕过 HTML 解析器，确保\n被当作文本节点保留 - Vue 中避免用
{{ }}插值（默认转义），改用v-text或v-html（后者需确保内容可信） - React 中用
{sourceString}是安全的（JSX 默认textContent行为），但若来源是用户输入，仍需提前 HTML 转义（如用DOMPurify.sanitize()） - 不要在
pre内部嵌套div或p，它们会脱离预格式化上下文，导致换行逻辑断裂
pre 内容对不齐、中文缩进塌陷
因为等宽字体不是可选项，是排版对齐的前提：
- 必须显式设置
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Microsoft YaHei Mono', monospace，优先包含系统级等宽字体 - 避免只写
monospace——某些旧 Android 或 Linux 系统 fallback 到不支持中文的等宽字体，造成中文字体降级失真 - 如果
pre内嵌了code，记得给code单独设等宽字体，否则继承链可能被父级 CSS 中断 - Tab 宽度不可靠，建议统一用空格缩进（如 2 或 4 个），并配
tab-size: 4控制显示宽度
pre 内容太长撑破容器、横向滚动条不出现
这是最常被忽略的布局陷阱：
-
pre默认不折行、不收缩，完全按字符位置铺开：必须设overflow-x: auto，且父容器要有明确宽度限制（如max-width: 100%），否则滚动条不会触发 - 慎用
word-break: break-all，它会让 URL 或 base64 强行断开，可读性崩坏；优先用overflow-wrap: break-word - 显式加一句
white-space: pre-wrap是最稳妥的做法，既保留原始换行与空格，又允许内容自动折行（避免横向溢出） - 别对
pre设置text-align: justify或word-break: break-all，这些会干扰格式保留逻辑
真正麻烦的不是怎么写 pre，而是怎么确保里面的内容既“可读”又“不被解析”——转义漏一个，整块代码就可能消失或破坏页面结构；字体栈少一个，中英文缩进就错位；textContent 换成 innerHTML，换行符就变成普通字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
