真正要保留文本空格，需确保空白字符真实存在于DOM文本节点中；<pre>不生效常因内容在到达前被转义、解析或压缩；动态插入应使用textContent而非innerText；white-space推荐pre-wrap；等宽字体必须显式声明。
不能解决多空格、换行、缩进等复合需求，真正要“保留文本空格”，得看空白字符是否真实存在于 DOM 文本节点中——不是标签写对了就行，而是内容得“活着”传进去。
为什么 <pre> 有时不显示空格和换行
根本不是 <pre> 失效，而是内容在到达它之前就被吃掉了：
- 服务端模板（如 EJS、Django）默认 HTML 转义，
"line1\nline2"变成字面量line1\nline2字符串，浏览器收不到真实换行符 - 用
innerHTML动态写入时，若字符串含或 <code>>未转义，会被解析为标签，破坏原始结构 - HTML 文件被压缩（minified），源码里压根没换行和缩进，
<pre>无从保留 - CSS 重置样式（如某 reset.css 设了
white-space: normal）直接覆盖掉<pre>默认的pre值
动态插入时必须用 textContent，别碰 innerText
innerText 是渲染感知型属性，每次读取都会触发“规范化空白”（等效于 white-space: normal），导致拼接过程中空格逐次消失；textContent 则原样保留所有 Unicode 空白字符（U+0020、U+0009、U+000A、U+000D）：
- ✅ 正确：
el.textContent = "a\tb\n c"—— 制表符、换行、空格全在 - ❌ 错误：
el.innerText += "a "; el.innerText += "b"—— 中间空格大概率被抹掉 - ⚠️ 注意：
textContent会清空元素原有子节点（包括<strong>等），如需保留结构，改用document.createTextNode()+appendChild()
white-space 的三个关键值怎么选
不要只记名字，要看行为差异：
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre：严格按源码空格/换行显示，不折行，不合并，适合代码块但易撑破容器 -
white-space: pre-wrap：保留所有空白，**允许折行**，支持滚动条，是<pre>的现代平替（推荐搭配overflow-x: auto和tab-size: 4） -
white-space: pre-line：合并连续空格，但保留换行符 —— 适合日志、富文本编辑器输出等“换行重要、空格不重要”的场景
最常被忽略的一点：等宽字体不是可选项。中文缩进塌陷、Tab 显示错位，90% 是因为没显式设置 font-family，比如 font-family: 'SFMono-Regular', Consolas, 'Microsoft YaHei Mono', monospace —— 单写 monospace 在旧 Android 上可能 fallback 到不支持中文的字体。
