pre标签换行空格不显示的根本原因是HTML默认压缩空白符，且动态注入或转义会破坏原始格式；需用textContent注入、显式设置white-space、避免模板转义，并统一缩进方式。
pre 标签内容换行和空格不显示？
根本原因是 HTML 默认会把连续空白符（空格、制表符、换行）压缩成一个空格，pre 标签虽有“保留格式”语义，但前提是内容得是纯文本——一旦你用 JavaScript 动态写入、或模板引擎渲染时被转义/截断，就失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保内容直接写在
<pre class="brush:php;toolbar:false;"></code> 标签内，不要靠 <code>innerHTML = 'xxx'</code> 拼接字符串（容易丢失换行符 \n）</li><li>如果必须用 JS 注入，用 <code>textContent</code> 而非 <code>innerHTML</code>，避免 HTML 解析干扰空白处理</li><li>检查是否被 CSS 重置：某些 reset.css 会设 <code>white-space: normal</code>，得显式加回 <code>white-space: pre</code> 或更宽松的 <code>pre-wrap</code></li></ul><H3>pre 里中文对齐错乱、缩进塌陷？</H3><p>因为等宽字体（monospace）对中文支持不一，浏览器默认用系统字体回退，中英文字符宽度不一致，导致 tab 和空格视觉错位。</p><p>实操建议：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><ul><li>强制指定等宽中文字体：比如 <code>font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;</code>，Mac 上优先用 SFMono，Windows 加入 'Microsoft YaHei Mono'（需本地有）</li><li>避免混用 tab 和空格：统一用 2 或 4 个空格缩进，tab 在不同编辑器下宽度可能被解释为 4 或 8，<code>pre</code> 不做转换</li><li>如需高亮代码，别硬塞 <code>pre</code> + 手动 <code><span></code>，改用 <code>prism.js</code> 或 <code>highlight.js</code>，它们自动处理 whitespace 和语言 token</li></ul><H3>pre 标签内容过长导致横向滚动失效？</H3><p>常见现象是内容撑破容器、文字折行混乱，或滚动条没出现。这不是 <code>pre</code> 的问题，而是父容器和 <code>pre</code> 自身的 overflow 控制没配对。</p><p>实操建议：</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><ul><li><code>pre</code> 必须设 <code>overflow-x: auto</code>，且不能有 <code>white-space: normal</code> 覆盖</li><li>父容器（比如 <code><div></code>）需限制宽度，否则 <code>pre</code> 会无限伸展；加 <code>max-width: 100%</code> 更安全</li><li>慎用 <code>word-break: break-all</code>：它会让长单词（如 URL、base64）强行截断，破坏可读性；优先用 <code>overflow-wrap: break-word</code></li></ul><H3>服务端渲染时 pre 内容被转义成 或 <br>？</H3><p>这是模板引擎（如 EJS、Nunjucks、Django）默认 HTML 转义惹的祸。<code><pre class="brush:php;toolbar:false;">hello\nworld</pre>里的 \n 被当成普通文本，浏览器收不到真实换行符。实操建议：
立即学习“前端免费学习笔记（深入）”；
- EJS 用
（带短横）代替，跳过转义 - Nunjucks 用
{{ rawContent | safe }} - Django 用
{{ rawContent|safe }}，但确保内容可信，否则有 XSS 风险 - 更稳妥的做法：服务端把换行符替换成
\n字面量，前端用textContent注入，彻底绕过 HTML 解析阶段
真正难的不是加个
pre标签，而是从内容生成、传输、注入到渲染，每个环节都可能悄悄吃掉换行或空格。尤其在 SSR + hydration 混合场景下，前后端对空白的处理稍有不一致，格式就没了。 - EJS 用
