HTML中连续空格被浏览器默认折叠为单个空格，需用 、white-space:pre-wrap或CSS方案解决，注意<pre>副作用及框架中转义陷阱。
连续空格不显示，不是代码写错了，是浏览器按规范把它们“吃掉”了——必须用显式手段告诉它“别合并”。
检查是否误用了普通空格
直接在 HTML 源码里敲 3 个空格键：hello world，浏览器只会渲染成 hello world。这不是 bug，是 HTML 解析器的默认行为：所有连续空白字符（空格、制表符、换行）都会被折叠为单个空格，首尾空白还会被忽略。
常见错误现象：
- 在 Vue/React 模板中写
{{ item.name }} {{ item.unit }}，期望留出三个空格，结果只显示一个 - 用
<p>标题 副标题</p>做对齐，但文字紧贴着显示
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 静态文本中需要精确空格，改用
标题 副标题 - 动态内容（如 API 返回的字符串）别拼接
- 别在
<pre>里写普通段落——它语义不符，且自带等宽字体和 margin
验证 white-space 属性是否生效
white-space 是控制空白行为最灵活的方式，但它只作用于当前元素及其子文本节点，不会穿透到子元素内部（比如子 <span> 仍按自身规则处理）。
参数差异关键点：
-
white-space: pre：保留所有空白和换行，但不自动换行 → 超长文本会横向溢出容器 -
white-space: pre-wrap：保留空白和换行，且允许折行 → 大多数场景首选 -
white-space: pre-line：合并空格，只保留换行 → 不解决“连续空格”问题
容易踩的坑：
- 给按钮加
white-space: nowrap防止换行，却意外让中间多个空格也被合并，图标和文字粘连 - 在父容器设了
white-space: pre-wrap，但子<div>是块级元素，内部空格仍按默认规则处理 - 用
!important强盖别人写的white-space: normal，结果发现子元素继承失效
排查 <pre> 标签的副作用
<pre> 看似简单，但它不只是“让空格可见”，还自带三重隐性约束：块级显示、font-family: monospace、默认上下 margin。
常见错误现象：
- 中文在
<pre>里显示发虚、字号偏小（因为等宽字体对中文支持差） -
<pre>console.log("hello");</pre>中的<和>被浏览器当标签解析，结构错乱 - 把用户输入的富文本直接塞进
<pre>，未过滤<script>→ XSS 风险
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯展示可信内容（如自己写的示例代码），用
<pre>最省事 - 动态内容优先用
<div style="white-space: pre-wrap;">+textContent设置内容 - 真要用
<pre>，记得重置字体：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
注意框架模板中的二次解析陷阱
在 Vue / React / Svelte 等框架中， 的行为受渲染方式影响极大：
- 用
v-html或dangerouslySetInnerHTML插入含 - 用模板插值写
{{ title }} {{ unit }}，框架会把 - SSR 场景下，服务端生成的
真正容易被忽略的是：空格问题常不是孤立出现的。它往往和字体度量、行高、内联元素盒模型、甚至 `text-align: justify` 的拉伸逻辑耦合。调试时别只盯着空格本身，先确认父容器的 display 类型和 line-height 是否干扰了内联布局。
