HTML中敲十个空格只显示一个，是因为解析器在词法分析阶段将所有空白字符统一转为U+0020，再将连续空白压缩为单个空格，该过程发生在DOM构建前，与CSS和编辑器无关。
为什么敲十个空格只显示一个
因为HTML解析器在词法分析阶段就把所有空白字符（\u0020、\u0009、\u000A、\u000D、\u000C）统一转成\u0020，再把连续多个压缩成单个。这个过程发生在DOM构建前，和CSS无关，也和你用什么编辑器无关。
常见错误现象：
- 在
<p>hello world</p>里敲4个空格，渲染出来还是"hello world" - 复制粘贴Word文档里的段落，首尾空格消失、中间多个空格变一个
- 用
innerHTML = "a b"赋值后，实际看到的是"a b"
这不是bug，是规范行为。真正影响页面的，是文本节点里的空白；标签之间、属性值里的空白不参与折叠。
想保留多个空格或换行，该用哪个标签
<pre>是最直接的选择，但它会强制等宽字体、禁用自动换行、忽略white-space之外的大部分CSS排版控制。所以别一上来就套<pre>，先看场景：
立即学习“前端免费学习笔记（深入）”；
- 纯代码块、日志输出、ASCII艺术 →
<pre><code>... - 用户输入的地址、简历、诗歌，需保留换行+允许折行 → 给容器加
white-space: pre-wrap - 只差一个空格不让断行（如“¥100.00”不能拆成两行）→ 用
- 想让两个词之间空出“半个汉字”的距离 → 用
\u2002），不是堆
注意：<textarea>和contenteditable元素内部天然保留所有空白，但一旦用JS读取再写回innerHTML，就又进折叠流程了。
用CSS控制空白比用HTML实体更可靠
多数时候，你不是真要“插入空格”，而是想“控制间距”。这时候用CSS更干净：
- 单词间统一加空 →
word-spacing: 0.5em（注意它会影响整段文字） - 仅两个词之间加空 → 包一层
<span>，用margin-left或padding-left - 段落首行缩进 →
text-indent: 2em，别用一堆 - 按钮文字微调 → 改
letter-spacing或padding，而非塞空格实体
本质是内容层干预，它会进入DOM树、被搜索引擎索引、影响可访问性（屏幕阅读器会读出“空格”）。而CSS是表现层控制，语义清晰、响应式友好、后期维护成本低。
正则处理HTML空格时容易漏掉哪些字符
如果你用/\s+/g清理字符串，大概率会漏掉 （即\u00A0）以及富文本编辑器插入的\u2028（LINE SEPARATOR）或\u3000（中文全角空格）。Python、JavaScript的\s默认不包含这些。
安全做法是显式覆盖：
- JS中：
/[\s\u00A0\u2000-\u200F\u2028\u2029\u202F\u205F\u3000]+/g - Python中：
re.sub(r'[\s\u00A0\u2000-\u200F\u2028\u2029\u202F\u205F\u3000]+', ' ', s) - 注意：从
textContent取值后是Unicode字符，从innerHTML取值是HTML实体字面量，正则写法完全不同
最复杂的地方不在怎么加空格，而在你得先分清——这个空格是用户数据的一部分（比如简历里的缩进），还是纯样式需求（比如导航菜单对齐）。前者该存原样、用white-space保真；后者直接用CSS，别污染HTML结构。
