pre标签未保留空格的根本原因不是其失效，而是空格在抵达pre前已被服务端模板转义、html压缩或innerhtml解析破坏，导致dom中根本不存在真实空白字符。
pre标签为什么没保留空格？先查内容是否真被“吃掉”了
不是pre失效，而是空格根本没进到它里面——服务端模板（如 EJS、Django）默认转义插值内容，"a b"变成字面量字符串，\n和多个空格全被当普通字符渲染；HTML 压缩后源码里本来就没空格；用innerHTML写入时，若字符串含或<code>&未转义，还会被解析成标签，结构直接乱掉。
验证方法：打开开发者工具，选中pre元素，看 Elements 面板里它的 TextNode 内容是否真包含多个空格或\n。如果只有一堆文字连在一起，问题出在上游注入路径，不是pre本身。
动态插入时怎么确保换行和空格不丢
核心原则：绕过 HTML 解析器，走纯文本路径。
- 绝对优先用
textContent，例如：el.textContent = "line1\n line2";——\n和空格都会原样成为 TextNode - Vue 中避免
{{ }}（默认 HTML 转义），改用v-text；若必须用v-html，确保内容已由后端或DOMPurify.sanitize()处理过 - React 中
{rawString}天然走textContent逻辑，安全；但用户输入仍需提前转义、<code>>、& - 别在
pre里嵌套<div>或<code><p></p>——它们会脱离预格式化上下文，换行和缩进规则立即失效pre里中文缩进塌了？等宽字体不是可选项
空格保留了，但显示错位，大概率是字体问题。非等宽字体下，中文字符、英文字符、空格宽度不一致，Tab 和空格对不齐。
- 必须显式设置
font-family: monospace，或具体字体如Consolas、ui-monospace、"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace - 避免用
system-ui或sans-serif这类兜底值，不同系统 fallback 结果不可控 - 如果嵌套了
<code>，记得给它也设等宽字体，否则继承链可能被中断 - 加
white-space: pre-wrap防长行溢出，再配overflow-x: auto更稳妥
pre里要显示带尖括号的代码怎么办
pre不自动转义，<div>会被当成真实标签解析，轻则内容消失，重则 XSS。 <ul> <li>服务端渲染时，对用户输入必须做 HTML 编码：<code><div>hello</div> - 必须显式设置
- 前端 JS 动态注入前，用
document.createTextNode(str).textContent或DOMPurify.sanitize(str)处理 - 别手动拼接
和<code>>——容易漏转义&，导致<script></script>变成<script></script> - 想语法高亮？用
<pre class="brush:js;toolbar:false;">...</pre>结构，高亮库（如 Prism.js）只认<code>标签
真正容易被忽略的是：pre的“保留”只在 HTML 解析那一刻生效；后续任何 JS 改写、框架重渲染、CSS 覆盖white-space，都会让它失效。它不是一层万能罩子，而是一次性契约。
