最轻量方案是插入不可折叠空格（ ），适合小范围精确补空；推荐通用解法为white-space: pre-wrap，保留空格与换行且允许折行；慎用<pre>标签，其自带等宽字体与语义限制。
直接用 插入不可折叠空格
这是最轻量、最可控的方案，适合小范围精确补空，比如字段名后加两个空格、单位前防断行。每个 渲染为一个独立、不可合并、不可换行的空格，浏览器不会动它。
常见错误现象：
- 写成
 （漏掉分号）→ 浏览器不识别，当纯文本显示 - 在 React/Vue 模板里直接写
textContent赋值 → 不解析实体，只显示字面量 - 混用普通空格和
a b→ 中间仍只显示一个空隙（普通空格被折叠）
实操建议：
- 静态 HTML 中，数量控制在 1–4 个以内；超过建议换 CSS 方案
- 数字与单位之间强制不换行：写
100 px，别写100 px - 在 JSX 或 Vue 模板中动态插入时，必须用
dangerouslySetInnerHTML或v-html，且确保内容已转义
用 white-space: pre-wrap 批量接管空白行为
这是现代项目中最推荐的通用解法，尤其适合整段含多空格+换行的用户输入、日志、代码注释等场景。它保留所有空格和换行，同时允许自动折行，不溢出容器。
立即学习“前端免费学习笔记（深入）”；
参数差异注意点：
-
pre：保留空白但不换行 → 长文本会横向撑破布局 -
pre-wrap：保留空白 + 允许换行 → 日常首选 -
pre-line：合并连续空格，只保留换行 → 不满足“连续空格”需求
容易踩的坑：
- 父容器设了
overflow: hidden或text-overflow: ellipsis→pre-wrap内容会被截断 - 没配
word-break: break-word→ iOS Safari 遇到长无空格字符串（如 base64）可能不折行 - 给整个列表或大区域加该样式 → 破坏响应式排版，文本无法自然断词
慎用 <pre> 标签，明确它的边界
<pre> 本质是 white-space: pre 的快捷写法，自带等宽字体、上下 margin 和预格式化语义。它不是“加空格工具”，而是为代码块、ASCII 图、可信日志设计的。
实操限制很具体：
- 不能嵌套在
<p>里 —— HTML 规范禁止块级标签在段落内 - 默认
font-family: monospace→ 中文显示发虚、字号偏小，需手动覆盖 - 内容含
<、>等符号却未转义 → 直接被解析为标签，结构错乱 - 包裹用户输入内容却不做 XSS 过滤 → 高风险
替代更干净的做法：<div style="white-space: pre-wrap;"> + textContent 设值，既保留格式又避开字体副作用。
表格单元格和移动端要额外注意渲染上下文
<td> 同样受空白折叠影响，但解决方案有细微差别：
- 微调对齐（如字段名后加 3 个空格）→ 用
- 整单元格是代码或带缩进的配置项 → 加
white-space: pre-wrap到<td>上 - 别用全角空格（中文输入法空格）→ 宽度依赖字体，iOS/Android 显示不一致
- 别把
<td>包进<pre>→ 会重置垂直对齐、padding、border-collapse 行为，表格结构易崩
真正容易被忽略的是：移动端上，pre-wrap 内容若遇上 border-collapse: collapse 的表格，空格视觉间距可能被 border 和 padding 吞掉。调试时临时加 border: 1px solid red 才看得清真实边界。
