HTML中多个空格默认被浏览器折叠为一个，这是由空白折叠规则决定的；可通过 、white-space: pre/pre-wrap或<pre>标签等方法保留多个连续空格。
直接用 最快，但别连敲十次
连续空格不显示，本质是 HTML 的「空白折叠」规则在起作用——浏览器把一串空格、制表符、换行全当一个空格处理。想快速让两个词之间出现三个可见空格， 是最直觉的选择，但它不是“按空格键的替代品”，而是独立字符：每个 渲染为一个不可断行、不被合并的空格。
常见错误现象：
- 写成
   （漏掉分号）→ 浏览器不识别，当成普通文本显示 - 在 Vue / React 模板里直接写
v-html或dangerouslySetInnerHTML时未转义 → 可能被二次解析或 XSS 风险 - 用
实操建议：
- 静态文本中，
- 避免嵌套使用，比如
- 需要等宽效果（如代码对齐），优先考虑
white-space: pre而非堆
white-space: pre 适合整块文本保留格式
这个 CSS 属性不是“加空格”，而是告诉浏览器：“别动我原文里的任何空白”。它真正解决的是「原始空格 + 换行 + 制表符」全部原样渲染的问题，比一个个写 更干净。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 展示代码片段、日志输出、ASCII 图形
- 后端返回带缩进的 JSON/YAML 字符串，前端要原样呈现
- 用户输入的富文本中明确要求保留段落内空格（如诗歌排版）
参数差异注意点：
-
pre：保留所有空白，不自动换行 → 长文本会溢出容器 -
pre-wrap：保留空白，但允许换行 → 大多数情况更安全 -
pre-line：合并空格，只保留换行 → 不满足“连续空格”需求
性能影响很小，但别滥用：给整个 <body> 或长列表加 white-space: pre，会导致文本无法折行，影响响应式布局。
<pre> 标签本质是 white-space: pre 的快捷写法
<pre> 不是“专门用来加空格”的标签，它只是默认启用了 white-space: pre 和等宽字体。你完全可以用 <div style="white-space: pre;"> 达到同样效果，且不带字体副作用。
容易踩的坑：
-
<pre>默认用font-family: monospace→ 中文显示发虚、字号偏小，需手动覆盖：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; - 内容里有
<>等符号，没做 HTML 转义 → 直接被解析为标签，导致结构错乱 - 用
<pre>包裹动态内容（如 API 返回的字符串），但忘了过滤或转义 → XSS 风险
实操建议：
- 纯展示、内容可信（如自己写的示例代码），用
<pre>最省事 - 内容来自用户或外部接口，优先用
<div>+white-space: pre-wrap+textContent设置内容 - 需要微调字体/行高，直接加内联样式比重置
<pre>全局样式更可控
别用 letter-spacing 模拟空格
letter-spacing 改的是「字符间距」，不是「插入空格字符」。它会让“abc”变成“a b c”，但“中文”也会被拆开，“字”和“符”之间硬塞像素间隙，语义和可访问性全丢。
为什么这不算“实现连续空格”：
- 屏幕阅读器仍读作“中文”，不会把间隙当停顿 SEO 抓取时忽略视觉间距，只认真实文本结构
- 复制粘贴出来的文本没有空格，全是连着的字
- 设
letter-spacing: 8px后，英文单词内部字母全散开，破坏可读性
它唯一合理用途是微调标题字距或设计感排版，不是解决“空格不显示”问题的技术路径。真要控制单词间距离，word-spacing 更接近目标，但也无法生成真实空格字符。
