pre标签本身有效，但空格换行未显示是因为内容在到达pre前已被模板转义、HTML解析或压缩移除；需配合textContent插入、等宽字体设置、white-space保留及tab-size控制。
pre 标签确实能保留空格、换行和制表符，但前提是这些字符真实存在于 HTML 源码或被正确注入的文本中——它不修复缺失的换行，也不纠正字体错位，更不兜底处理 JS 渲染或模板转义带来的空白丢失。
为什么 pre 里空格/换行没显示出来
根本不是标签失效，而是内容本身在到达 pre 之前就被“吃掉”了：
- 服务端模板（如 EJS、Django）默认对插值内容做 HTML 转义，
<pre class="brush:php;toolbar:false;">hello\nworld</pre>中的\n会变成字面量\n字符串，浏览器收不到真实换行符 - 用
innerHTML动态写入时，若字符串含或 <code>>未转义，会被解析为标签，破坏原始结构 - 写在 HTML 文件里却用了压缩版（minified）HTML，源码中本就没有换行和缩进，
pre无从保留 - CSS 覆盖了
white-space，比如某 reset.css 设了white-space: normal，直接覆盖掉pre默认的pre值
怎么让 pre 真正保留格式并正确对齐
光靠 pre 标签远远不够，必须同步控制字体与空白行为：
- 显式设置
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace，避免用system-ui或sans-serif这类非等宽兜底值 - 中文环境建议加
'Microsoft YaHei Mono'（需确认系统存在），否则中英文字符宽度不一致会导致缩进塌陷 - 统一缩进方式：全部用空格（推荐 2 或 4 个），别混用
\t，因为不同编辑器对 tab 的宽度解释可能为 4 或 8，而pre不做归一化 - 需要控制 tab 显示宽度时，加 CSS
tab-size: 4（注意 Safari 旧版本需-moz-tab-size兼容）
动态插入内容时 pre 不保留换行怎么办
问题不在 pre，而在插入路径选错了：
立即学习“前端免费学习笔记（深入）”；
- 绝对优先用
textContent而非innerHTML，例如：el.textContent = "line1\nline2"—— 它绕过 HTML 解析，确保\n被当作文本节点保留 - Vue 中避免用
{{ }}插值，改用v-html并确保内容已预转义（或可信）；React 中用{String(raw)}配合dangerouslySetInnerHTML - 如果内容来自用户输入或 API，先做 HTML 实体转义（如把
→ <code>），再塞进 <code>textContent，防止 XSS 且保格式 - 不要在
pre内部嵌套div或p，它们会脱离预格式化上下文，导致换行逻辑断裂
pre 内容太长撑破容器、横向滚动条不出现
这是最常被忽略的布局陷阱：pre 默认不折行、不收缩，完全按字符位置铺开：
- 必须设
overflow-x: auto，且父容器要有明确宽度限制（如max-width: 100%），否则滚动条不会触发 - 慎用
word-break: break-all，它会让 URL 或 base64 强行断开，可读性崩坏；优先考虑white-space: pre-wrap+overflow-wrap: break-word -
pre不响应width属性（HTML5 已废弃width属性），别写<pre class="brush:php;toolbar:false;" width="80"></pre>，无效 - 若嵌套了
code，记得给code也设等宽字体，否则继承链可能被中断
真正容易被忽略的是：pre 的“保留”只发生在 HTML 解析那一刻；后续任何 JS 修改、框架重渲染、CSS 覆盖或字体 fallback 失败，都会让格式保护瞬间失效。它不是一层胶水，而是一次性快照。
