pre标签不显示空格换行的根本原因不是标签失效，而是内容在抵达pre前已被模板转义、js处理或html压缩导致真实换行符和空格丢失，需确保dom文本节点含真实 及连续空格，并配合white-space:pre-wrap和等宽字体使用。
pre标签不显示空格换行，根本不是标签失效
问题几乎从来不在 pre 本身——它从 HTML 解析阶段就开始保留
、 和连续空格，前提是这些字符真实存在于 DOM 文本节点中。你看到的“没效果”，大概率是内容在抵达 pre 前就被吃掉了：
• 服务端模板（如 EJS、Jinja2）默认转义或 trim 换行
• JS 用 innerHTML 插入时，字符串里的 "
" 被当作文本字面量而非换行符
• HTML 文件被压缩，源码里压根没换行和缩进
• CSS 重置库（如 Normalize.css）覆盖了 pre 默认的 white-space: pre
动态写入时，必须用 textContent 而非 innerHTML
这是最常踩的坑。用 innerHTML 往 pre 里塞字符串，哪怕含
，也可能因尖括号解析、& 转义或构建工具自动 trim 导致空白丢失。
• 正确做法：preEl.textContent = "line1
line2
indented";
• 错误示范：preEl.innerHTML = "line1
line2";（
在 JS 字符串中是换行，但若字符串来自 JSON 或用户输入，可能只是字面量 "\n"）
• Vue 中避免 {{ text }}，改用 v-text；React 中 {text} 默认走 textContent，安全，但若来源不可信，仍需提前 HTML 转义（如 DOMPurify.sanitize()）
静态 HTML 里写死内容，换行和空格要“真存在”
别靠编辑器视觉对齐——得让换行符和空格作为原始字节进入 HTML：
• 直接换行写：<pre class="brush:php;toolbar:false;">第一行
第二行（前面两个空格）
第三行</pre>（注意：这里
是实际换行，不是字符串 "
"）
• 避免在 pre 内嵌套 <div> 或 <code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img
src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a>
<p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>——它们会脱离预格式化上下文，导致换行逻辑断裂
• 不要用全角空格（ ）替代英文空格（ ），字体不支持时易显示为方框；如需统一，预处理时用 str.replace(/ /g, " ")
光靠 pre 标签不够，还得配 CSS 和字体
pre 默认用等宽字体，但很多项目 CSS 会覆盖它：
• 必须显式加固：pre { white-space: pre-wrap; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; }
• white-space: pre-wrap 比 pre 更实用：保留空格缩进，又允许超长行自动换行，避免横向滚动
• 别只写 monospace——旧 Android 或 Linux 系统 fallback 可能不支持中文，造成字体降级失真
• Tab 宽度不可靠，建议统一用空格缩进（如 4 个），并加 tab-size: 4
最容易被忽略的是：Chrome Elements 面板里看到的换行 ≠ 渲染结果。真正要看的是 console.log(JSON.stringify(preEl.textContent)) 是否含 "\n"，以及 computed styles 里 white-space 是否被意外覆盖。字体缺失、父元素样式穿透、甚至 <pre class="brush:php;toolbar:false;"></pre> 这类 CMS 插件生成的嵌套结构，都可能让格式“看起来没生效”。
