应使用语义空格实体（如 、 、 ）配合white-space: pre-wrap实现精确宽度控制，避免用多个普通空格或全角空格，动态内容中需防html转义。
用 控制单个空格宽度不靠谱
很多人以为写多个 就能“加宽空格”，但实际效果受字体影响极大： 的视觉宽度取决于当前 font-family 和 font-size，比如在等宽字体里是固定像素，在比例字体（如 sans-serif）里会浮动。更关键的是，它本质仍是“1字符宽”的不可换行空格，无法精确到像素级控制。如果目标是让两个词之间刚好空出 24px， 在 16px 字体下可能只占 ~18px，还随浏览器渲染引擎微调。
用 white-space: pre-wrap + 或 组合更可控
真正能稳定控制宽度的，是语义明确的空格实体： （en space，约 0.5em）、 （em space，1em）、 （thin space，1/6em）。它们的宽度基于当前字号计算，不受字体字形干扰，且不会被折叠：
-
100 km） -
姓名 电话） - 必须配合
white-space: pre-wrap使用，否则这些实体在普通段落里仍可能被周围空白规则影响换行行为
表格单元格里连续空格显示异常？别用 堆砌
在 <td> 里看似可用，但一旦表格设了 <code>table-layout: fixed 或列宽受限，多个 会把单元格撑高或触发意外换行。此时优先选 / ，并确保父 <td> 有 <code>white-space: pre-wrap：
td {
white-space: pre-wrap;
}
不要用全角空格 （U+3000）——它虽能显示，但宽度依赖中文字体，iOS 和部分 Android 系统上会错位；也别给 <td> 外套 <code><pre class="brush:php;toolbar:false;"></pre>，那会重置默认垂直对齐和内边距，破坏表格流。
动态内容中插入空格要防 HTML 转义
在 React、Vue 或 innerHTML 场景下，直接拼接字符串如 "a" + " " + "b" 不会生效，因为引号里的 是纯文本，不会被解析为实体。必须用：
- React：用
{String.fromCharCode(160)}或 - Vue：用
v-html渲染含实体的字符串 - 原生 JS：
el.innerHTML = "a b"，绝不能用textContent
最易被忽略的是上下文切换：静态 HTML 里写 最省心；但服务端模板或 JSX 中，得确认框架是否自动转义——否则你写的 可能变成页面上明文显示的字符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
