标签不显示空格和换行的根本原因是内容中缺乏真实空白字符，而非标签失效；需确保源文本含真实 、 及连续空格，并配合white-space: pre和等宽字体使用。

为什么 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 里空格和换行没显示出来&lt;/H3&gt;&lt;p&gt;常见原因是 HTML 解析器把源码里的连续空格、制表符、换行全当普通空白处理，直接折叠成单个空格；哪怕你写了 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; hello world </pre>，浏览器也可能只显示“hello world”且无缩进。这不是 <pre class="brush:php;toolbar:false;">&lt;/code&gt; 失效，而是它依赖原始文本中的真实空白字符——而这些字符常在编辑、复制、模板渲染过程中被意外抹掉或转义。&lt;/p&gt;&lt;H3&gt;确保空白字符真正存在于 DOM 文本节点中&lt;/H3&gt;&lt;p&gt;关键不是“用了 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt;”，而是里面的内容是否含真实 &lt;code&gt; &lt;/code&gt;、&lt;code&gt; &lt;/code&gt;、多个 &lt;code&gt; &lt;/code&gt;。尤其注意：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;服务端模板（如 Jinja2、EJS）默认会 trim 或 escape 换行，需显式关闭：Jinja2 用 &lt;code&gt;{% raw %}...{% endraw %}&lt;/code&gt; 或 &lt;code&gt;{{ value | forceescape }}&lt;/code&gt; 配合 &lt;code&gt;white-space: pre&lt;/code&gt; CSS；EJS 用 &lt;code&gt;&lt;%- %&gt;&lt;/code&gt; 而非 &lt;code&gt;&lt;%= %&gt;&lt;/code&gt; 防止 HTML 实体转义&lt;/li&gt;&lt;li&gt;前端 JS 动态插入时，别用 &lt;code&gt;.innerText = str&lt;/code&gt;（会丢空白），改用 &lt;code&gt;.textContent = str&lt;/code&gt; 或直接 &lt;code&gt;innerHTML&lt;/code&gt;（但要确保字符串里是字面量 &lt;code&gt; &lt;/code&gt;，不是 &quot;\n&quot; 字符串）&lt;/li&gt;&lt;li&gt;从 textarea 读值？&lt;code&gt;textarea.value&lt;/code&gt; 保留换行，但若经 JSON.stringify 再 parse，&lt;code&gt; &lt;/code&gt; 会变成 &lt;code&gt;\n&lt;/code&gt; 字符串，得用 &lt;code&gt;JSON.parse(jsonStr)&lt;/code&gt; 恢复原始转义&lt;/li&gt;&lt;/ul&gt;&lt;H3&gt;仅靠 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 不够？补上 CSS 更稳&lt;/H3&gt;&lt;p&gt;&lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 默认行为是 &lt;code&gt;white-space: pre&lt;/code&gt;，但某些 CSS 重置库（如 Normalize.css）或自定义样式可能覆盖它。保险做法是显式加固：&lt;/p&gt;&lt;div class=&quot;aritcle_card flexRow&quot;&gt; &lt;div class=&quot;artcardd flexRow&quot;&gt; &lt;a class=&quot;aritcle_card_img&quot; href=&quot;/xiazai/skill11373&quot; title=&quot;HTML设计工具专业版&quot;&gt;&lt;img src=&quot;https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg&quot; alt=&quot;HTML设计工具专业版&quot; &gt;&lt;/a&gt; &lt;div class=&quot;aritcle_card_info flexColumn&quot;&gt; &lt;a href=&quot;/xiazai/skill11373&quot; title=&quot;HTML设计工具专业版&quot;&gt;HTML设计工具专业版&lt;/a&gt; &lt;p&gt;企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。&lt;/p&gt; &lt;/div&gt; &lt;a href=&quot;/xiazai/skill11373&quot; title=&quot;HTML设计工具专业版&quot; class=&quot;aritcle_card_btn flexRow flexcenter&quot;&gt;&lt;b&gt;&lt;/b&gt;&lt;span&gt;下载&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;pre { white-space: pre; /* 或更宽松的 pre-wrap，允许自动换行但保留空格/缩进 */ /* white-space: pre-wrap; */ font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }</pre><p>注意：<code>pre-line 会合并空格、只保留换行，不适合代码类格式；pre-wrap 是折中选择——既保留缩进和空格，又不会因超长行导致横向滚动。

遇到   或 <br> 混入怎么办

如果后端输出的是 HTML 实体（如把空格转成  、换行转成 <br>），<pre class="brush:php;toolbar:false;">&lt;/code&gt; 完全无效——它只认原始字符，不解析 HTML。此时必须：&lt;/p&gt;&lt;ul&gt;&lt;li&gt;源头修复：让后端返回纯文本，而非带 HTML 标签/实体的“伪 HTML”&lt;/li&gt;&lt;li&gt;临时 workaround（不推荐）：JS 中用 &lt;code&gt;str.replace(/ /g, ' ').replace(/&lt;brs*/?&gt;/g, ' ')&lt;/code&gt; 清洗，但要注意 XSS 风险，不能对不可信内容直接 &lt;code&gt;innerHTML&lt;/code&gt;&lt;/li&gt;&lt;li&gt;绝对避免在 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 里写 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt; code&lt;br&gt;</pre> ——这等于用 HTML 格式去模拟文本格式，彻底违背 <pre class="brush:php;toolbar:false;"></pre> 设计意图

最易被忽略的点：开发时看控制台 Elements 面板，右键“Edit as HTML”改出来的内容不会触发重新解析，要刷新或用 textContent 看真实值；生产环境还要检查 HTTP 响应体是否真含 字节，别被开发者工具的美化视图骗了。