html中连续空格被折叠为单个空格，需用 插入不可折叠空格；动态渲染须用innerhtml/v-html；white-space:pre-wrap可批量保留空格并折行；word-spacing仅增单词间隙，不解决空格折叠问题。
为什么直接敲空格键没用
浏览器解析 HTML 时，会把所有连续的空白字符（空格、制表符、换行）压缩成单个空格——这是 HTML 规范定义的「空白折叠」行为，和英文还是中文无关。哪怕你写 hello<space><space><space>world，最终渲染出来仍是 <code>hello world。
<h3>用 <code> </code>
</h3></code></space></space></space>
实体插入不可折叠空格 是唯一能保证“这里一定显示一个可见空格”的标准方式，每个都独立、不可断行、不被合并。
- 要三个空格？写
，不是 （中间的普通空格仍会被折叠）
- 在 React / Vue 中动态插入时，必须用
innerHTML 或 v-html 渲染，textContent 会把 当纯文本显示
- 别在属性值里用：比如
<div class="foo bar"> 是非法的，HTML 解析器会把它当多个 class 处理出错<h3>用 <code>white-space: pre-wrap 批量保留原始空格
适合整段英文文本需要保留单词间多个空格的场景，比如对齐表格、模拟终端输出、展示日志片段。
- 写法：
<p style="white-space: pre-wrap">hello world</p> 或更常见的是直接写空格：<p style="white-space: pre-wrap">hello world</p>
-
pre-wrap 比 pre 更实用：它保留空格和换行，同时允许自动折行，不会撑破容器
- 注意副作用：该样式会影响所有子元素内的空白处理，比如
<span>foo</span> <span>bar</span> 中的换行也会被保留，可能破坏内联布局
word-spacing 不是“加空格”，而是调单词间距word-spacing 控制的是**单词之间默认空隙的增量**，不是插入额外空格。
- 设
word-spacing: 20px，效果是让每个单词后多加 20px 间隙，但原文中 hello world 的三个空格仍会被折叠为一个再加 20px
- 它对中文几乎无影响（中文没有“单词”概念），也不解决“连续空格不显示”这个根本问题
- 真正需要精确控制单词间隔时，优先考虑 CSS Grid 或
display: inline-block + margin，比依赖 word-spacing 更可靠
，不是 （中间的普通空格仍会被折叠）innerHTML 或 v-html 渲染，textContent 会把 当纯文本显示<div class="foo bar"> 是非法的，HTML 解析器会把它当多个 class 处理出错<h3>用 <code>white-space: pre-wrap 批量保留原始空格
适合整段英文文本需要保留单词间多个空格的场景，比如对齐表格、模拟终端输出、展示日志片段。
- 写法：
<p style="white-space: pre-wrap">hello world</p>或更常见的是直接写空格：<p style="white-space: pre-wrap">hello world</p> -
pre-wrap比pre更实用：它保留空格和换行，同时允许自动折行，不会撑破容器 - 注意副作用：该样式会影响所有子元素内的空白处理，比如
<span>foo</span> <span>bar</span>中的换行也会被保留，可能破坏内联布局
word-spacing 不是“加空格”，而是调单词间距word-spacing 控制的是**单词之间默认空隙的增量**，不是插入额外空格。
- 设
word-spacing: 20px，效果是让每个单词后多加 20px 间隙，但原文中 hello world 的三个空格仍会被折叠为一个再加 20px
- 它对中文几乎无影响（中文没有“单词”概念），也不解决“连续空格不显示”这个根本问题
- 真正需要精确控制单词间隔时，优先考虑 CSS Grid 或
display: inline-block + margin，比依赖 word-spacing 更可靠
word-spacing: 20px，效果是让每个单词后多加 20px 间隙，但原文中 hello world 的三个空格仍会被折叠为一个再加 20pxdisplay: inline-block + margin，比依赖 word-spacing 更可靠容易被忽略的一点：如果你在 <pre class="brush:php;toolbar:false;"></pre> 标签里写英文，它确实保留空格，但会禁用字体抗锯齿、强制等宽字体、且默认不换行——这些副作用在普通正文里往往比空格问题更碍事。
