pre标签缩进错位根本原因是制表符宽度不一致及中文字体非等宽，应统一用空格缩进、指定等宽中文字体栈、使用white-space:pre-wrap、textcontent安全注入、避免全局样式覆盖。
pre 标签本身就能保留缩进，但直接往里塞配置文件内容，大概率会缩进错位、中文塌陷、复制粘贴失真——问题不在你写的空格少，而在浏览器怎么解释这些空格和换行。
为什么配置文件在 pre 里缩进看起来“少了一截”
根本原因有两个：一是编辑器用 4 个空格缩进，而你复制时可能混入了 \t（制表符），pre 默认按 8 字符宽渲染它；二是中文字体 fallback 到非等宽字体（比如 SimSun），导致一个汉字和一个空格宽度不等，视觉上直接“塌”了。
- 别信编辑器里的缩进显示——打开 DevTools，看
computed里的font-family是否真落到monospace或等宽中文字体栈上 - 检查配置内容是否含
\t：后端返回的 YAML/INI/TOML 常带原始\t，前端 JS 生成字符串时也容易漏处理 - 确认没被 reset.css 覆盖：
pre { white-space: normal; }这种规则会让所有缩进消失
确保缩进正确的三步实操
不是加个 pre 就完事，得从内容、字体、样式三层对齐：
- 内容层：统一用空格缩进（推荐 2 或 4 个），避免混用
\t；若后端返回含\t的字符串，JS 里先做str.replace(/\t/g, ' ') - 字体层：强制指定等宽中文字体栈，例如
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Microsoft YaHei Mono', monospace; - 样式层：设
white-space: pre-wrap（保留缩进 + 自动折行），再加overflow-x: auto防长行撑破容器
textContent 是唯一安全的注入方式
配置文件常含 &、、<code>>（比如 url = https://example.com?x=1&y=2），如果用 innerHTML 注入，& 会被解析成实体， 可能触发标签闭合，甚至 XSS。
- 永远用
preEl.textContent = configStr，它把整个字符串当纯文本处理，\n和空格原样保留 - 不要写
<pre class="brush:php;toolbar:false;">{{ configStr }}</pre>—— 模板引擎默认转义，\n变成 - 如果必须高亮（比如 YAML 关键字变色），别自己搞
innerHTML+ 正则替换，改用Prism.js或highlight.js，它们内部已处理好 whitespace 边界
嵌套 code 标签不是可选项，是必须项
只用 pre 不嵌 code，语义不完整：屏幕阅读器读不出“这是配置代码”，SEO 无法识别语言类型，语法高亮工具也找不到入口点。
- 正确结构：
<pre class="brush:php;toolbar:false;"><code class="yaml">...</code></pre>（注意class值不是yaml，而是language-yaml） - 别写
<pre class="brush:php;toolbar:false;" lang="yaml"></pre>——lang属性表示自然语言（如zh），不是编程语言 - 如果配置内容来自 API，且不含 HTML 特殊字符，
textContent注入后，再手动给code元素加class即可，不用动pre的 class
缩进不是靠 CSS 补出来的，是内容本身必须携带的。浏览器只负责“怎么展示”，不负责“怎么生成”——你在源码里删掉那几个空格，或者后端返回的字符串开头没空格，光调 tab-size 或 text-indent 都没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
