结论是别用空格键堆，优先用 或white-space:pre-wrap；因html规范强制在解析阶段将连续空白字符压缩为单个空格并丢弃首尾空白，故敲10个空格只显示1个。
直接说结论：别用空格键堆，优先用 或 white-space: pre-wrap，其余方案按场景补位。
为什么敲10个空格只显示1个
这不是浏览器 bug，是 HTML 规范强制行为：所有连续空白字符（空格、制表符、换行）在解析阶段就被压缩成单个空格，首尾空白还会被丢弃。你看到的“失效”，其实是规范在执行。
- 常见错误现象：
<div>姓名： 张三</div>渲染后“姓名：”和“张三”之间只有1个空格 - 适用场景：纯文本内微调间距，比如“Mr. Smith”防断行、“编号： 001”对齐
- 不适用场景：整段缩进、表格列对齐、响应式布局——这些该用
text-indent、padding或 CSS Grid - 性能影响：
用 插入可控空格
是最轻量、兼容性最好的实体，代表一个不可折行空格，宽度固定、与字体无关。
- 要3个空格？写
text-indent: 2em - 表格空单元格必须用它：
<td> </td>，否则边框/背景可能塌陷（尤其border-collapse: collapse下） - 别混用
- JavaScript 动态插入时，用
cell.textContent = '\u00A0'，别用innerHTML拼接字符串，防转义失败
用 white-space: pre-wrap 保留原始空格
这是现代解法，比硬塞 更干净，适合含多空格或换行的文本块。
- 写法：
<p style="white-space: pre-wrap">地址： 北京市 朝阳区 建国路1号</p>，源码里几个空格就显示几个 - 关键优势：保留空格和换行，同时允许自动换行（
pre不换行，pre-wrap会换），适合地址、代码片段、诗歌 - 注意点：
pre-wrap默认用等宽字体，如需继承父级字体，加font-family: inherit - 别滥用：标题、按钮里套
pre-wrap会破坏语义，影响 SEO 和无障碍访问
哪些方法看起来快但实际埋坑
全角空格、<pre class="brush:php;toolbar:false;"></pre> 标签、letter-spacing 都有明确缺陷，不是“快”，是“省事一时，调试三天”。
- 全角空格（ ）：被当汉字渲染，中英文混排时宽度突变，缩放或换字体后对齐崩坏
-
<pre class="brush:php;toolbar:false;"></pre>：强制等宽字体 + 默认外边距 + 内容超宽触发滚动条，仅适合真正需要原样输出的代码块 -
letter-spacing：作用于每个字符间隙，英文单词内部也被拉宽，中文则整体发散，无法精准控制“词间”距离 -
empty-cells: show：表格属性，但遇上border-collapse: collapse就彻底失效，不如单个
真正难的不是选哪个方案，而是判断“这里到底需不需要空格”——多数所谓“空格需求”，本质是样式或语义问题，强行用空格解决，后续维护成本远高于初期那几秒钟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
