浏览器默认压缩连续空白符，需用white-space CSS属性（如pre-wrap）或 等特殊字符控制；<pre>适用于语义化格式内容，JS动态插入空格应避免innerHTML转义问题。
浏览器默认会把连续空格、制表符、换行符全部压缩成一个空格，直接敲空格键或写多个 在源码里，也不一定如你所愿——关键得看用在哪、怎么用、谁在渲染。
为什么多个 有时还是只显示一个空格
常见错误现象：在<p>里写Hello World，结果只看到一个空格；或者用 JavaScript 拼接'a' + ' '.repeat(3) + 'b'，innerHTML 渲染后仍被压缩。
-
- 如果父容器设置了
white-space: normal（默认值），且内部有换行或混合了普通空格 - 在属性值中使用
<div title="a b">里的 - 服务端或 CMS 输出时若经过
html_entity_decode()且未指定ENT_NOQUOTES | ENT_HTML5和 UTF-8 上下文，
用white-space CSS 控制整块文本的空格行为
这是最可控、最符合现代开发习惯的方式，尤其适合动态内容或需要响应式换行的场景。
-
white-space: pre-wrap：保留所有空格和换行，同时允许自动折行——日常排版首选 -
white-space: pre：保留空格和换行，但绝不换行，超宽内容会溢出容器 -
white-space: pre-line：合并连续空格，但保留换行符，适合纯文本段落微调 - 不要对内联元素（如
<span>）单独设pre，否则它的换行行为会破坏行内流布局 - 可配合
font-family: inherit覆盖<pre>的等宽字体副作用
什么时候该用<pre>而不是
<pre>不是为了“多打几个空格”，而是为了一整段格式化内容的语义保真。
立即学习“前端免费学习笔记（深入）”；
- 代码块、日志输出、ASCII 图、带缩进的配置示例——这些内容天然依赖空格对齐，
<pre>是语义正确选择 -
<pre>内写 - 默认带上下外边距和等宽字体，要用
pre { margin: 0; font-family: inherit; }重置 - 别用
<pre>包裹单个词之间的空格，比如<pre>Name: John</pre>——语义错、样式难维护
JavaScript 动态插入空格的三个避坑点
用 JS 控制空格数量最容易翻车，核心矛盾在于：字符串处理、DOM 插入、浏览器渲染三者分属不同层级。
- 用
textContent塞'a' + String.fromCharCode(160).repeat(4) + 'b'可行，但'a' + ' '.repeat(4) + 'b'不行——textContent不解析 HTML， - 用
innerHTML时，确保字符串已正确转义：'a' + ' '.repeat(4) + 'b'（注意&是&的实体），否则 - 最稳方案：先设
element.style.whiteSpace = 'pre-wrap'，再用textContent塞原始含空格字符串，完全避开实体转义问题
真正难的不是“怎么让空格显示出来”，而是判断这个空格该由语义承载（<pre>）、由样式控制（white-space）、还是由字符本身表达（ 、 、 ）。选错一层，后面全是补丁。
