应使用 white-space: pre-wrap 并配合 tab-size: 4 和等宽字体，同时预处理将 Tab 替换为统一空格数，避免混用空格与 Tab 导致缩进错乱。
pre 标签里空格被合并怎么办
HTML 默认会把连续空格、制表符、换行都压缩成单个空格，所以直接往 <pre class="brush:php;toolbar:false;"></pre> 里塞带缩进的代码，经常看起来“扁平化”了——明明写了 4 个空格，渲染出来只剩 1 个。
根本原因是浏览器解析时应用了默认的 white-space 行为。解决思路不是靠 JS 插件或额外库，而是用 CSS 控制空白符处理方式：
-
<pre class="brush:php;toolbar:false;"></pre>默认已有white-space: pre，但部分编辑器复制的代码含混合空格/Tab，或用了非断空格（ - 更稳妥的是显式设为
white-space: pre-wrap：保留空格和换行，同时允许自动折行，避免横向滚动 - 若需严格等宽对齐（比如 Python 缩进敏感），配合
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace确保字体本身字符宽度一致
Tab 字符在不同浏览器显示不一致
写死 \t 在 HTML 源码里，Chrome 显示为 8 列，Firefox 可能是 4 列，Safari 又可能不同——这不是 bug，是各引擎对 Tab 的默认制表位（tab stop）定义不同。
实际项目中应避免依赖原生 Tab 渲染，推荐两种做法：
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 服务端或构建时把
\t替换为固定数量的<pre class="brush:php;toolbar:false;"><code></code></pre> - 前端用
String.prototype.replace(/\t/g, ' ')统一转为空格，再插入 DOM；注意别漏掉多层嵌套中的 Tab - 若必须保留 Tab 语义（如展示真实编辑器行为），用 CSS
tab-size: 4强制统一，但 IE 不支持，Edge 16+ 才可用
代码块里混用空格和 Tab 导致缩进错乱
常见于从 IDE 复制粘贴的代码：if 块用空格缩进，内部 for 循环却用 Tab，结果高亮后缩进层级“跳变”，视觉上像少了一层。
这类问题无法靠 CSS 修复，必须预处理源字符串：
- 检查原始字符串是否含
\t，有则全部替换为统一空格数（推荐 2 或 4） - 用正则
/^ +/gm提取每行开头空格数，取最小值做“缩进基准”，再用.replace(/^ {0,100}/gm, '')去除首行缩进（即“去首行缩进”逻辑） - 某些高亮库（如 highlight.js）提供
ignoreIllegals: true参数，可跳过缩进异常导致的解析失败，但治标不治本
pre + code 嵌套后样式丢失或溢出
很多人写成 <pre class="brush:php;toolbar:false;"><code class="js">...</code></pre>，但忘了 <code> 默认是 inline 元素，如果没设 display: block，CSS 的 padding、background 可能只包住文字不包整行。
正确姿势是保证样式作用域清晰：
- 给
<pre class="brush:php;toolbar:false;"></pre>设overflow-x: auto和padding，负责容器边距和横向滚动 - 给
<code>设display: block和line-height，确保每行高度可控 - 避免在
<code>上直接设white-space，它继承自<pre class="brush:php;toolbar:false;"></pre>更可靠 - 移动端要注意
pre宽度超屏时，white-space: pre-wrap比pre-line更友好，后者会吃掉所有空格
缩进问题本质是文本渲染与代码语义的错位，最稳的方案永远是：输入前标准化（空格/Tabs/首行缩进），输出时用 pre-wrap + tab-size + 等宽字体三件套兜底。别指望浏览器自动猜你想要几个空格。
