浏览器默认折叠连续空格是HTML规范规定的空白折叠行为；需用实体或white-space CSS属性（如pre-wrap）来保留多个空格，<pre>标签仅适用于预格式化文本场景。
HTML里敲多个空格不显示，不是编辑器问题，是浏览器渲染规则本身如此——它会把连续空白字符（空格、换行、制表符）折叠成一个空格。编辑环境只是让你写代码的地方，真正“吃掉”空格的是HTML解析器。
为什么VSCode里敲了8个空格，预览却只看到1个
因为VSCode只是文本编辑器，它不参与HTML渲染。你看到的缩进是代码结构排版，而浏览器在解析时按规范清理空白。即使你在VSCode里用4空格缩进整个文档，<p>hello world</p>里那4个 能显示，但4个普通空格键敲出来照样被合并。
- 检查是否误开了“自动格式化”：VSCode默认可能用Prettier或内置格式化器把多余空格删了，关掉
editor.formatOnSave或确认prettier.tabWidth没干扰内容区 - 别依赖编辑器空格做页面排版：编辑器里的缩进只服务可读性，页面间距该用CSS控制
- 如果想在编辑器中“所见即所得”预览空格效果，得配合实时渲染插件（如Live Server），且HTML源码里必须用
white-space等显式手段
textarea和contenteditable里空格保留不住怎么办
用户在<textarea>里敲10个空格，JS取value后塞进<div>，结果只剩1个——这不是空格丢了，是innerHTML把字符串当HTML解析，触发了空白折叠。
- 正确做法：用
textContent赋值，它把内容当纯文本，不解析HTML，空格原样保留 - 如果必须用
innerHTML（比如要渲染用户输入的简单标签），先对空格做转义：str.replace(/ /g, ' ') -
contenteditable元素更麻烦：它本身支持富文本，但默认仍走HTML渲染逻辑；加white-space: pre-wrap样式是最轻量的兜底方案
white-space: pre-wrap 和 <pre> 标签怎么选
两者都能保留空格和换行，但语义和行为差异明显，乱用会导致样式失控或SEO问题。
立即学习“前端免费学习笔记（深入）”；
-
<pre>是语义化标签，表示“这段内容是预格式化的”，浏览器默认给它white-space: pre+font-family: monospace；适合代码块、日志、ASCII图——但如果你只是想让一段普通文案多空两格，套<pre>就语义错误 -
white-space: pre-wrap是纯样式控制，保留空格和换行，同时允许自动换行（pre不允许），字体也不变；适合用户评论、后台配置项说明等需要保留原始换行但又得适配容器宽度的场景 - 注意兼容性：
pre-wrap在IE9+完全支持，老项目若需兼容IE8，只能用<pre>或大量
哪些空格实体真该用，哪些纯属自找麻烦
别一看到空格就堆 。大部分时候它只是临时止痛药，长期维护成本高，还容易漏写分号或混用 / 。
- 必须用
单价 ¥100，避免价格被拆到下一行 - 慎用
- 绝对不用
- 替代思路：单个词间微调用
letter-spacing，单词间统一加宽用word-spacing，整块内容缩进用padding-left——比硬塞空格实体干净得多
空格问题本质不是“怎么加”，而是“谁该负责”：结构用HTML语义（如<pre>），样式用CSS（如white-space），内容逻辑用JS（如textContent）。三者混用，比如在<pre>里再写 ，反而会让意图模糊、调试困难。
