HTML中用 实体可打出不可合并的空格；CSS推荐white-space: pre-wrap保留空格并自动折行；JS动态插入需用\u00a0或innerHTML避免被忽略。
HTML 里怎么打出真正的空格（不是被浏览器合并掉的）
浏览器默认会把连续多个 、普通空格、制表符、换行都压缩成一个空格。想让空格“可见且保留”，得用 HTML 实体或 CSS 控制。
-
-
- 纯靠多个
- 如果悬浮层里有中英文混排，
CSS 的 white-space 怎么配合用才不翻车
光靠实体不够，悬浮层常因父容器限制导致空格失效。关键在控制文本渲染行为。
-
white-space: pre：保留空格和换行，但不自动换行，容易撑破悬浮层宽度 -
white-space: pre-wrap：推荐首选，保留空格和换行，同时支持自动折行，适配响应式悬浮层 -
white-space: break-spaces：新标准，空格也能折行，但 IE 完全不支持，Chrome 86+ 才稳定 - 别给悬浮层设
overflow: hidden后还指望空格显示出来——它会直接裁掉超出部分
悬浮层里中文文案加空格的常见坑
中文排版不用空格分词，但设计稿常要求“标题与单位之间留一格”“图标后空半格”，这时容易误用。
- 用
- 用
- 避免用
- 如果悬浮层用了
font-feature-settings: "tnum";（等宽数字），
JavaScript 动态插入空格时要注意什么
悬浮层内容常由 JS 拼接生成，直接拼字符串容易丢空格或被转义。
立即学习“前端免费学习笔记（深入）”；
-
element.textContent = "价格：" + price + " 元"→ 中文冒号后那个空格会被浏览器忽略 - 改用
innerHTML并显式写el.innerHTML = "价格： " + price + " 元" - 若用模板字符串，记得转义：
`价格：${String.fromCharCode(160)}${price}${String.fromCharCode(160)}元`（160 是 - React/Vue 用户注意：
{" "}在 JSX 中仍会被压缩，必须写{'\u00a0'}或
/* 示例：悬浮层中安全插入带空格的中文标签 */状态：运行中 ｜ CPU：72%
空格不是小事，尤其在高密度信息的悬浮层里——差那半格，可能就让“已启用 ｜ v2.4.1”变成“已启用｜v2.4.1”贴死，阅读节奏全乱。实体选 ，CSS 选 pre-wrap，JS 里别信肉眼看到的空格。
