html中连续空格仅显示一个是因解析器执行“空白折叠”规范；滥用会导致语义混乱、可访问性差、响应式失效；应优先用css的white-space、text-indent等方案替代。
是最直接的解法，但不是万能的；盲目堆砌它会导致语义混乱、可访问性下降，且无法响应式缩放。
为什么连续空格在HTML里只显示一个
这是HTML解析器的默认行为，叫「空白折叠」（whitespace collapsing）：所有连续的空格、制表符、换行符都会被压缩成单个空格。这不是bug，是规范设计——否则写在代码里的缩进和换行全会变成页面上的可见空白。
常见错误现象包括：
- 后台返回含多个空格的字符串（如
"A B"），前端渲染后变成"A B" - 用空格对齐文字（如模拟表格列），结果全部挤在一起
- 复制粘贴文本后格式错乱，却查不到换行或制表符
用 时必须注意的三件事
能阻止换行、避免折叠，但它本质是「字符」，不是「样式」。滥用会带来副作用：
- 屏幕阅读器会逐字读出每个
- 它宽度随字体变化，
font-size: 12px和24px下视觉空隙差异明显 - 不能用于属性值内部，比如
<div class="item active"> 会破坏class解析 <li>若需固定像素级间距，<code>不如margin-left或padding可控 -
white-space: pre：完全保留原始空白和换行，适合代码块、日志输出 -
white-space: pre-wrap：保留空白，但允许自动换行，兼顾可读性与排版 -
<pre class="brush:php;toolbar:false;"></pre>标签：语义明确，自带white-space: pre，但默认有上下边距和等宽字体，需重置样式 - 注意：
white-space对父容器生效，子元素若设了display: inline-block或浮动，可能绕过该规则 - 全角空格宽度固定为一个汉字，缩放时无法按比例调整，响应式布局易错位
-
- 它们没有语义，也不支持
letter-spacing等字体级控制 - 真正需要「首行缩进两个汉字」，应该用
text-indent: 2em，而非插两个全角空格
更健壮的替代方案：CSS white-space 和 <pre class="brush:php;toolbar:false;"></pre>
当空格来自动态数据（如API返回、用户输入），硬编码 不现实。此时应交由CSS控制渲染逻辑：
中文排版中慎用全角空格和窄空格
有人用全角空格 （U+3000）或窄空格 （U+2009）代替 ，但问题不少：
复杂点在于：空格是否承载语义？如果是对齐、缩进、分隔，优先用CSS；如果空格本身是内容（如OCR识别结果、协议日志），才考虑 或 white-space。别让一个空格，变成整页布局的隐患。
