<pre>仅对纯文本保留空格与换行，嵌套HTML时失效；应优先用textContent设置内容，配合white-space: pre-wrap和系统级等宽字体（如ui-monospace），禁用Tab、统一空格缩进，并严格防范动态注入风险。
pre标签不是万能的，但它是保留原始排版的第一道防线
直接用 <pre> 包裹文本，确实能阻止浏览器合并空格、忽略换行——但它只对「纯文本」起效。一旦里面混入 <span>、<a> 或其他 HTML 标签，解析器就会按常规 DOM 规则处理子节点，空格和换行可能再次被压缩或丢弃。
常见错误现象：<pre>Hello<span>World</span></pre> 中，Hello 和 <span> 之间的换行/缩进在渲染时大概率消失；动态插入时用 innerHTML 往 <pre> 里塞带 \n 的字符串，也可能因 HTML 解析阶段提前截断换行符而失效。
- 始终优先用
textContent设置内容，绕过 HTML 解析器，确保 \n、\t、多个空格原样落进 DOM 文本节点 - 若必须嵌套 HTML（如高亮关键词），把格式化逻辑移到 CSS 层：用
white-space: pre-wrap+font-family: monospace替代<pre>，再用<span>套样式 - 避免在
<pre>内写注释或条件逻辑（如<!-- ... -->），注释节点会干扰相邻文本节点的空白继承
white-space 属性要配 font-family 才真正生效
white-space: pre 看似能模拟 <pre> 行为，但它的“保留空格”只是渲染阶段的 fallback，不改变 DOM 结构。如果源 HTML 字符串本身已被 JS 处理（比如模板字符串中 \n 被转义、构建工具自动 trim），那再设 white-space 也救不回丢失的换行节点。
更关键的是：即使空格和换行都保住了，非等宽字体（如 system-ui、Arial）会让空格、字母、中文宽度不一致，导致缩进错位、ASCII 表列塌陷——你看到的“对齐”只是幻觉。
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace，优先调用系统级等宽字体 - 禁止单独写
monospace，旧 Android 或某些 Linux 发行版 fallback 到不支持中文的等宽字体，造成中文字体降级失真 - 如果
<pre>内嵌了<code>，记得给<code>单独设等宽字体，否则父级 CSS 可能中断继承链
Tab 和空格混用是隐形排版杀手
浏览器对 Tab 字符（U+0009）的显示宽度不可控：tab-size: 4 只影响渲染，不改变实际字符数；不同编辑器默认 Tab 宽度可能是 2、4 或 8；复制粘贴时 Tab 还可能被转成空格。
结果就是：同一段代码在编辑器里对齐，在网页里缩进错乱；协作时别人改了一行，整列数据全偏移。
- 统一用空格缩进（推荐 2 或 4 个），禁用编辑器的 “insert spaces for tabs” 自动转换功能
- 用
tab-size: 4作为视觉辅助，但别依赖它保证对齐 - 检查原始字符串是否含不可见控制字符（如 U+00A0 不间断空格、U+200B 零宽空格），它们在
<pre>中也会被保留并破坏对齐
动态注入内容时，textContent 是唯一安全路径
用 innerHTML 往 <pre> 里塞用户输入或 API 返回的字符串，风险极高：尖括号被当标签解析、& 被二次转义、换行符在 webpack/vite 构建中被自动 trim，甚至 JSON 字符串里的 \n 在 JS 解析后变成真实换行，但若原始字符串来自 URL 参数或 localStorage，\n 可能只是字面量两个字符。
React 中 {sourceString} 默认走 textContent 路径，看似安全，但前提是 sourceString 本身没被提前 HTML 转义（比如后端返回的已转义字符串再套一层转义就完蛋）。
- 服务端返回纯文本？前端直接
el.textContent = responseText - 来源是用户输入？先用
DOMPurify.sanitize()清洗，再赋值给textContent（不要用v-html或dangerouslySetInnerHTML） - Vue 中避免
{{ }}插值，改用v-text指令；若必须用v-html，确认内容完全可信且不含原始换行需求
最易被忽略的一点：pre 的空白保留发生在 HTML 解析阶段，不是靠 CSS。删掉所有样式，<pre> a\n\nb </pre> 在 DOM 里仍是 4 个空格 + 文本 + 换行 + 换行 + 文本 —— 但如果你用 JS 动态拼接字符串再塞进去，拼接过程本身就已经破坏了原始结构。
