textContent读取+white-space: pre-wrap渲染最稳妥；innerHTML会压缩连续空白为单空格，导致缩进丢失；应优先用CSS控制空格行为而非依赖HTML空格。
直接用 textContent 读取、用 white-space: pre-wrap 渲染，是最稳的组合；别依赖 innerHTML + 多个普通空格，那基本等于白写。
为什么 innerHTML = "a b" 里四个空格渲染出来只剩一个
HTML规范规定：解析器在构建DOM时，会把连续空白字符（空格、制表、换行）全部压缩成单个空格，并丢弃首尾空白。这不是浏览器bug，是标准行为。哪怕你在字符串里拼了十个" "，塞进innerHTML后，浏览器也只当一个空格处理。
常见错误现象：div.innerHTML = "姓名：" + user.name + " 电话："，本想空两格对齐，结果渲染后紧贴着显示；或者从textarea取值后直接赋给span.innerHTML，用户敲的缩进全没了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 读取用户输入（如
textarea.value）后，若需保留原始空格，优先走textContent而非innerHTML - 若必须用
innerHTML，就把空格替换成 - 避免混用
用 white-space 控制整块文本的空格行为
white-space 是CSS层面对空格最直接的干预方式，它决定浏览器“要不要吃掉”你写的空格和换行。关键不是选哪个值，而是匹配场景：
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 想保留所有空格+换行，且允许自动折行 → 用
white-space: pre-wrap（比<pre>友好，不强制等宽字体） - 只保留空格但合并换行（比如日志里一堆空格分隔字段，但不想每行都顶到左边）→ 用
white-space: pre-line - 完全禁止换行，空格照常保留 →
white-space: nowrap，适合单行标签或按钮文字微调 - 千万别对大段富文本容器设
white-space: pre，它会禁掉所有自动换行，移动端极易横向溢出
从后端或富文本编辑器拿到的HTML字符串怎么清理空格
富文本编辑器（如TinyMCE、Quill）输出的HTML常含大量 、 、<br>混杂，还可能嵌套<span style="white-space:pre">，直接渲染容易错位或样式冲突。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先统一转义：用正则把
" "，再用.replace(/\s+/g, ' ').trim()收口——但注意：这会毁掉原本有意保留的缩进 - 更安全的做法是「清洗+标记」：用
DOMParser解析字符串，遍历文本节点，对每个节点的textContent做replace(/\s{2,}/g, ' ')，再用textContent写回，避开innerHTML的折叠逻辑 - 如果后端能改，让API返回纯文本字段（非HTML），前端用
white-space: pre-wrap包裹，比在HTML字符串里跟空格死磕强得多
需要精确控制某两个词之间的间距，别硬塞空格
比如「状态： 已上线」，看似简单，但字体缩放、中英文混排、响应式宽度变化时，两个 可能撑不开或撑过头。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
word-spacing：只影响单词间距离，不影响标点，适合「状态」和「已上线」这种分离词组 - 用
margin-left：给第二个词包一层<span>，加margin-left: 1em，单位用em可随字体缩放 - 用
padding-left：如果空隙要带背景色或边框，padding比margin更可控 - 绝对不要用多个
最易被忽略的一点：空格问题本质是「语义 vs 布局」的撕扯。你写的 是内容，white-space是样式，letter-spacing是视觉——三者混用时，DOM结构、可访问性、SEO提取都会悄悄出问题。优先用CSS解决，内容层只留必要语义空格。
