浏览器未保留空格和换行，根本原因在于html解析阶段已将源码中连续空白折叠为单个空格，dom文本节点内本就无真实空白；常见破坏源包括服务端模板转义、trim及innerhtml插入时未正确处理换行符。
为什么写了却没保留空格和换行
根本不是pre失效，而是内容里压根没有真实空白字符。HTML 解析器在构建 DOM 前就已把源码中连续空格、制表符、换行全折叠成单个空格——哪怕你写的是<pre class="brush:php;toolbar:false;"> hello</pre>，浏览器收到的 DOM 文本节点里可能只剩一个空格。
常见破坏源头：
- 服务端模板（如 Jinja2、EJS）默认对插值内容做 HTML 转义或 trim，
\n字符串 - 前端用
innerHTML插入字符串时，若含或 <code>&未转义，会被解析为标签，结构错乱 - JS 中用
innerText = str赋值，它会丢掉所有空白格式；应改用textContent = str - 从
textarea.value读值后又经JSON.stringify()再JSON.parse()，
怎么确保 pre 里真有空格和换行
关键在「内容注入路径」：必须让原始空白字符以文本节点形式进入 DOM。
- 静态 HTML 中，直接在
<pre class="brush:php;toolbar:false;"></pre>标签内敲空格和回车（别用复制粘贴，容易带不可见控制字符） - 服务端输出纯文本内容时，禁用自动转义：Jinja2 用
{% raw %}...{% endraw %}，EJS 用 - 前端 JS 动态写入：
el.textContent = "line1 line2 with tab"—— 这个 - Vue 中避免
{{ }}（默认转义），改用v-text；React 中{source}默认走textContent路径，安全
pre 里空格对不齐、中文缩进塌陷
不是空格丢了，是字体不等宽。空格和 Tab 在非等宽字体下宽度不一致，缩进自然错位。
- 必须显式设置
font-family，优先列具体等宽字体：'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, 'Microsoft YaHei Mono', monospace - 避免只写
monospace—— 某些旧 Android 系统 fallback 到不支持中文的等宽字体，导致中文字体降级失真 - 如果
pre内嵌了code，记得给code单独设等宽字体，否则继承链可能被父级 CSS 中断 - Tab 宽度不可靠，建议统一用空格缩进（如 2 或 4 个），并配
tab-size: 4控制显示宽度
pre 内容撑破容器、横向滚动条不出现
pre 默认不折行、不收缩，完全按字符位置铺开。不加限制，它会无限横向延伸。
- 必须设
overflow-x: auto，且父容器要有明确宽度约束（如max-width: 100%或width: 80ch） - 慎用
word-break: break-all—— 它会让 URL 或 base64 强行断开，可读性崩坏；优先用overflow-wrap: break-word（注意拼写是break-word，不是break-wor） - 如果要允许长行自动换行但保留缩进，CSS 改用
white-space: pre-wrap，比pre更实用
真正难的从来不是“加个pre”，而是确认空白字符是否真实存在于 DOM 文本节点中——这一步漏了，后面所有样式和字体调整都是徒劳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
