html中连续空格被折叠是规范行为；唯一靠谱的静态方案是用 （需带分号），它表示不可断开的空白字符，不参与折叠；多空格需重复写 ，react/vue中须用innerhtml或v-html解析。
连续按空格键在HTML里永远不生效——这不是浏览器bug，也不是你代码写错了，是HTML规范从1993年就定死的行为：所有连续空白字符（空格、制表符、换行）必须被折叠成单个空格。想“让空格键生效”，本质是绕过这个规则。
为什么 是唯一靠谱的静态方案
直接敲空格键 → 浏览器解析时就扔掉多余空格；用 → 它是独立字符实体，不参与空白折叠，也不允许折行。 不是“空格的替代品”，它就是一种有明确语义的字符：此处必须保留一个不可断开的空白。
- 必须带分号：
 无效（浏览器当普通文本渲染） - 要三个空格？写三遍：
- React/Vue中动态插入时，得用
innerHTML或v-html，textContent会把 - 别用全角空格（U+3000）：虽然能显示多个，但字体渲染宽度不稳定，中英文混排时错位，且语义混乱
white-space: pre-wrap适合整段文本保留原始格式
这不是“让空格键生效”，而是告诉浏览器：“别动我原文里的任何空白”。它真正解决的是后端返回带缩进的日志、JSON、诗歌等场景，而不是给标题加两个空格这种局部需求。
-
pre-wrap：保留空格和换行，且自动换行 → 日常最安全的选择 -
pre：保留所有空白，但不换行 → 超宽文本会溢出容器，慎用 -
pre-line：只保留换行，合并空格 → 不满足“连续空格”需求 - 别给
div或p全局加white-space: pre：会导致内部<strong></strong>、<a></a>等标签的换行也被保留，布局意外崩坏
<pre class="brush:php;toolbar:false;"></pre>不是“加空格工具”，是预格式化语义容器
<pre class="brush:php;toolbar:false;"></pre>本质是white-space: pre + 等宽字体 + 默认外边距的快捷写法。它适合代码块、ASCII图、日志输出这类需要原样呈现的场景，不适合日常文案微调。
- 里面写
hello world，页面真会显示四个空格 - 但它会禁用内联HTML标签解析（比如
<strong></strong>在<pre class="brush:php;toolbar:false;"></pre>里不会加粗） - 默认等宽字体可能破坏整体设计风格，若只需保留空白，用
div style="white-space: pre-wrap;"更可控 - 不要为了“让两个词隔开点”而套
<pre class="brush:php;toolbar:false;"></pre>——该用margin或padding的地方，硬塞<pre class="brush:php;toolbar:false;"></pre>只会增加维护成本
最容易被忽略的一点：空格问题从来不是孤立的。当你发现需要堆 或强行用white-space时，先问一句——这真的是语义上需要“空格”，还是本该用CSS间距（margin、padding、letter-spacing）或结构化标签（<dl></dl>、<table>）来解决？过度依赖空格实体，往往意味着布局思路卡在了“像素对齐”的旧范式里。</table>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
