HTML中连续空格被压缩为单个空格是规范行为；用 可插入不合并空格；white-space: pre-wrap适合保留原始空白且允许换行；混合使用易致宽度不一致，推荐CSS统一控制。

为什么直接敲空格键没用

HTML解析器在词法分析阶段会把所有连续空白字符（包括空格、制表符、换行符）统一压缩成单个U+0020空格。所以你在源码里敲10下空格键，浏览器只渲染1个——这不是bug，是规范行为。

常见错误现象：hello world 在页面上显示为 hello world；用innerText读取时也只拿到一个空格；复制到Excel里可能被当成分隔符导致错列。

• 普通空格 （ASCII 32）永远会被合并
•   是唯一能稳定叠加的空格实体，每个都算独立字符
• 全角空格　（U+3000）被当汉字处理，不参与压缩，但宽度固定为1em，中英文混排时易错位

用   插入多个空格最稳妥

  对应Unicode U+00A0，浏览器既不合并也不换行，是动态内容里插入可控空格的首选。

使用场景：表格对齐、段落缩进、防止数字与单位断行（如10 kg）、按钮文字微调间距。

立即学习“前端免费学习笔记（深入）”；

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

• 要3个空格就写   ，别省略分号
• 在JS字符串里拼接："Hello" + "\u00A0\u00A0\u00A0" + "World"
• 注意：不要在class或id属性值里用 ，会导致选择器失效
• Vue/React模板中直接写 有效，但SSR渲染时需确认转义逻辑

white-space: pre-wrap 比   更适合大段文本

当需要保留用户输入的原始空格和换行（比如评论、日志、代码片段），硬塞一堆 既难维护又增大体积。

white-space: pre-wrap让元素内所有空格、制表符、换行符原样保留，同时允许自动换行——这是<pre class="brush:php;toolbar:false;"></pre>标签的CSS等价方案。

• 比<pre class="brush:php;toolbar:false;"></pre>灵活：可自由设置字体、颜色、行高，不用受限于等宽字体
• 比white-space: pre友好：不会强制禁用换行，长文本不会撑破容器
• 兼容性好：IE9+、所有现代浏览器均支持
• 慎用在SEO关键文本上：搜索引擎可能弱化预格式化内容的权重

半角/全角空格实体的实际差异

 （ ）、 （ ）、 （ ）这些实体宽度受字体影响小，但实际使用率低，容易踩坑。

典型问题：设计稿要求“缩进两个汉字”，开发误用  （宽度随字体变化），上线后微软雅黑下缩进不足，思源黑体下又过宽。

•   ≈ 0.5em，适合英文单词间微调
•   ≈ 1em，中文首行缩进可用，但需确认字体是否支持em度量
•   ≈ 1/6em，几乎看不见，调试时容易漏掉
• 全角空格　（U+3000）在中文字体下稳定，但西文字体中可能显示为方块或异常宽度

真正难的是混合场景：比如一个div里既有用户输入的带空格文本，又要插入几个 做对齐，此时white-space和实体混用会导致空格宽度不一致。最保险的做法是全程用CSS控制，把空格逻辑从HTML里剥离出去。