textcontent读不到原始换行缩进，是因为html解析时已将连续空白压缩为单个空格并不可逆；它返回的是dom构建后的标准化文本，而非源码字符串。
HTML里写多个空格、换行、制表符，最终只显示一个空格——这不是bug，是规范行为；想保留格式，得用对方法，而不是硬塞 或改DOM。
为什么 textContent 读不到原始换行和缩进
浏览器在解析HTML时就完成了空白压缩：所有连续的空白字符（\s，包括空格、\t、\n、\r、\f）被统一转为U+0020，并折叠成单个空格。这个过程发生在DOM构建阶段，不可逆。
textContent 返回的就是这个“已被压缩过”的结果。例如：
<p>Hello\n\tWorld</p>
其 textContent 是 "Hello World"，不是 "Hello\n\tWorld"。
- 你无法用JS阻止该压缩，只能在它之后适配
-
innerText会受white-space影响，textContent不会 - 想看到原始换行？只能从源码字符串、
<pre class="brush:php;toolbar:false;"></pre>内容或<textarea></textarea>的value中取
哪些标签能天然保留原始空白
只有语义上明确“内容需按原样呈现”的标签，才跳过解析阶段的空白压缩：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
<pre class="brush:php;toolbar:false;"></pre>和<textarea></textarea>：保留所有空格、制表符、换行符 -
<script></script>和<style></style>：空白影响语法结构，不压缩 <code>不在此列——它只是语义标签，不改变空白处理逻辑
注意：<pre class="brush:php;toolbar:false;"></pre> 默认用等宽字体、带上下 margin；若嵌入段落中，建议重置：pre { font-family: inherit; margin: 0; }。
white-space 属性怎么选值
CSS 的 white-space 控制的是“已压缩过的文本”如何渲染，它不改变 textContent，只影响视觉表现：
-
normal（默认）：继续折叠空白 + 自动换行 -
pre：保留所有空白和换行，禁止换行（类似<pre class="brush:php;toolbar:false;"></pre>视觉） -
pre-wrap：保留空白和换行，**允许自动换行**——最常用，适合地址、日志等含空格又需响应式的场景 -
pre-line：合并连续空白，但换行符（\n）仍起作用，适合富文本后端返回带换行的纯文本 -
break-spaces：空格也能作为换行点（Chrome 83+ / Firefox 73+），适合长空格分隔的标签云
别用 pre 给按钮或标题加样式——破坏语义，影响SEO和屏幕阅读器。
动态插入 HTML 时的空白间隙陷阱
用 innerHTML 拼接多行字符串时，如：el.innerHTML = `A\nB`，若 A 和 B 是 inline 或 inline-block 元素，换行会被解析为一个空格，导致约 4px 水平间隙。
- 安全写法一：模板字符串严格连写，无换行无空格：
`AB` - 安全写法二：父容器设
font-size: 0，子元素再设回正常字号（注意input::placeholder在旧版 Safari 可能失效） - 安全写法三：改用
display: flex，间隙天然消失
别用正则全局替换 \s+ 清理 HTML 字符串——会误删 <script></script> 里的换行、<pre class="brush:php;toolbar:false;"></pre> 内容，也搞不定 class="a b" 这类合法属性空格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
