<pre> 标签能保留空白符是因为浏览器默认应用 white-space: pre，使空格、制表符、换行符原样渲染；但需注意 HTML 解析器会将标签内缩进也视为文本节点，导致意外偏移，应避免源码缩进、转义特殊字符、显式设置样式，并在复杂场景下改用专业代码高亮库。
为什么 <pre> 标签能保留空白符
<pre> 的核心行为是浏览器默认应用 white-space: pre CSS 规则，这意味着空格、制表符（\t）、换行符（\n）全部被原样渲染，不合并、不折叠、不忽略。这和普通段落中多个空格缩进被压成一个空格完全不同。
但要注意：HTML 解析器在读取源码时，仍会把标签之间的换行和缩进当作文本节点处理——所以你写在 <pre> 标签里的内容，如果本身被 HTML 缩进包裹，那些缩进也会被渲染进去，造成意外的左偏移。
- 直接手写代码时，让
<pre>开始标签紧贴第一行代码，不要换行或加空格 - 避免用编辑器自动格式化功能对
<pre>内容做缩进，否则缩进会双重叠加 - 若从后端动态输出，确保原始字符串未被 trim 或 replace 掉首尾换行
如何防止 <pre> 内部代码被 HTML 转义破坏
如果你把一段含 <、>、& 的代码（比如 HTML 片段或 JSX）直接塞进 <pre>，浏览器会尝试解析这些字符为标签或实体，导致显示错乱甚至脚本执行风险。
必须手动转义或使用替代方案：
立即学习“前端免费学习笔记（深入）”；
- 用
替换 <code><，>替换>，&替换& - 更稳妥的做法：配合
<code>嵌套，再用 JavaScript 动态插入（如textContent赋值），绕过 HTML 解析 - 服务端渲染时，确保模板引擎对
<pre>内容做了 HTML-escape，而不是 raw 输出
<pre> 的常见样式干扰与修复
默认情况下，<pre> 会继承等宽字体（如 monospace），但可能被全局 CSS 覆盖（比如重设了 font-family 或 white-space）。一旦丢失 white-space: pre，缩进就失效了。
推荐显式声明基础样式：
pre {
white-space: pre;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
margin: 0;
padding: 1rem;
overflow-x: auto;
}
- 务必检查开发者工具里
<pre>元素计算后的white-space值是否仍是pre - 如果内容超宽，
overflow-x: auto比word-wrap: break-word更安全——后者会破坏缩进结构 - 不要给
<pre>设text-align: center，它会让整块代码居中，破坏相对缩进关系
替代方案：什么时候不该用 <pre>
当需要高亮语法、支持复制、响应式折行或嵌入交互逻辑时，<pre> 就显得单薄了。它只是容器，不带语义也不带能力。
- 纯静态展示小段代码，
<pre><code>足够；但超过 20 行建议用 Prism.js 或 highlight.js - 需要用户点击复制？
<pre>本身不支持，得靠 JS 绑定clipboard API+button - 移动端小屏上，
<pre>默认不折行，容易横向溢出——这时要加white-space: pre-wrap并限制最大宽度
真正麻烦的是混合场景：既要保留原始缩进，又要高亮关键词，还得适配深色模式。这时候别硬改 <pre>，老实用现成的代码块组件，比如 react-syntax-highlighter 或 shiki，它们底层也依赖 <pre>，但封装了 escape、tokenize、theme 切换这些容易出错的环节。
