html中空格被合并是因默认white-space: normal主动折叠空白符，并非bug；应通过white-space属性（如pre-wrap）控制，而非滥用 或冗余空格。
HTML中空格为什么“不显示”或“被合并”
浏览器默认会把连续的空白字符（空格、制表符、换行）压缩成单个空格，这是 HTML 规范定义的 white-space 行为。所以你在源码里写 10 个空格、或换行缩进，最终渲染几乎都只显示一个空格——这不是 bug，是预期行为。
常见错误现象： 用得泛滥；手动加多个 模拟缩进；在 <pre class="brush:php;toolbar:false;"></pre> 外用回车指望保留格式；CSS 未显式设置 white-space 就以为“源码怎么写就怎么显示”。
- 使用场景：排版文案中的缩进、代码片段对齐、诗歌/地址等需保留空格结构的内容
- 根本原因不是“HTML 不支持空格”，而是默认
white-space: normal主动折叠 - 不要靠反复敲空格或
用 white-space 控制空格渲染行为
这是最直接、语义清晰的方案。CSS 的 white-space 属性决定如何处理空白符和换行：
-
white-space: pre：保留所有空白和换行，但不自动换行（类似<pre class="brush:php;toolbar:false;"></pre>） -
white-space: pre-wrap：保留空白和换行，且允许自动换行（最常用，兼顾可读性与排版） -
white-space: pre-line：合并连续空格，但保留换行符（适合纯文本段落，如用户评论） - 避免用
white-space: nowrap处理空格问题——它只禁换行，不解决空格折叠
示例：
<p style="white-space: pre-wrap"> 这里有两个前导空格 换行后还有缩进</p>渲染时会真实保留缩进与换行。
和 / 的适用边界
是非断行空格，只在需要“此处必须有且仅有一个不可折叠空格”时才用，比如“第 1 章”防断行。但它不是排版工具：
-
-
- 绝对不要用
text-indent；不要用它对齐表格内文字——该用text-align或 flex - 如果编辑器输出大量
富文本编辑器中空格内容的落地处理
像 Quill、TinyMCE、CKEditor 默认会把用户敲的空格转成 或直接删掉多余空格，导致复制粘贴后格式丢失：
- 前端展示时，建议统一用
white-space: pre-wrap包裹富文本容器，比逐个替换 - 服务端存储前，可正则清理无意义空格：
text.replace(/ /g, ' ').replace(/\s+/g, ' ').trim()（注意别误杀<pre class="brush:php;toolbar:false;"></pre>内容） - 若需保留原始空格结构（如代码块），应识别
<pre class="brush:php;toolbar:false;"></pre>/<code>标签并跳过标准化处理 - 编辑器配置项如
quill.format('indent', 2)比手动敲空格更可控，也便于后续样式统一
真正难的不是“怎么让空格显示”，而是判断哪些空格该保留、哪些该归一化——这取决于内容类型：代码要原样，新闻稿要干净，诗歌要精确。别让空格问题掩盖了语义建模本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
