html中连续空格默认被浏览器折叠为一个，需用 、white-space: pre-wrap或标签等方法保留；其中 适用于防断行场景，white-space: pre-wrap最常用且兼顾换行，仅适用于需原样保留格式的代码等场景。
直接敲空格键没用，浏览器会把连续空白（空格、制表符、换行）全合并成一个——这不是 bug，是 HTML 规范行为。要精确控制空格，得选对方法，而不是堆 或乱套 <pre class="brush:php;toolbar:false;"></pre>。
什么时候必须用 ？
它只在「语义或排版需要强制保留且不可折行」时才该出现。常见场景包括：
- 人名、品牌、单位之间防断行：比如
<p>Microsoft Edge</p>，避免“Edge”被挤到下一行 - 表格空单元格占位：
<td> </td>是最轻量、兼容性最强的解法，能稳稳撑起边框和背景，不受border-collapse: collapse影响 - 中文段首缩进两个字：用两个
text-indent更快，但仅限静态文案；动态内容优先走 CSS - 金额与单位紧邻：
<span>¥ 199</span>，防止数字和符号被拆开
别把它当“万能空格键”：大量连写 会让 HTML 膨胀、可访问性变差（屏幕阅读器可能读作“不间断空格”），也违背语义。
<pre class="brush:php;toolbar:false;"></pre> 不是空格工具，是格式容器
<pre class="brush:php;toolbar:false;"></pre> 的本职是预格式化文本，不是为了多塞几个空格。它生效的前提是：你真需要原样保留所有空白 + 换行 + 缩进逻辑。
- 适合代码块、日志输出、ASCII 艺术等场景，例如：
<pre class="brush:php;toolbar:false;">function foo() {\n return true;\n}</pre> - 默认用等宽字体，若需改样式，必须显式重置：
pre { font-family: inherit; white-space: pre-wrap; margin: 0; } - 别在标题、按钮、表格单元格里滥用——破坏语义，影响 SEO 和无障碍，响应式下还容易横向溢出
-
white-space: pre-wrap比纯<pre class="brush:php;toolbar:false;"></pre>更实用：保留空格和换行，又允许自动折行，适合地址、带缩进的说明文字
CSS white-space 是现代首选方案
比起硬塞实体或标签，用 CSS 控制空白行为更干净、易维护、语义正确。关键取值按用途分：
-
white-space: pre-wrap：保留所有空格和换行，允许自动换行 → 最常用，适合富文本中含空格的段落 -
white-space: pre-line：合并空格，但保留换行符 → 适合从后端返回的带换行的纯文本（如用户评论） -
white-space: pre：完全保留空白，不换行 → 等效于<pre class="brush:php;toolbar:false;"></pre>，慎用，易触发横向滚动条 -
white-space: break-spaces：空格也能换行（Chrome 83+ / Firefox 73+）→ 新标准，但兼容性未全覆盖，生产环境暂不建议主用
注意：white-space 作用于整个元素，不能只给某几个单词加效果；想微调字符/单词间距，该用 letter-spacing 或 word-spacing，但它们不生成真实空格字符，提取文本时会丢失。
Vue/React 中写 容易翻车
框架模板语法对 HTML 实体的处理很敏感，稍不注意就变成字面量显示：
- Vue：在模板中直接写
v-text或{{ }}插值里会被当纯文本，得用v-html或写成 - React：JSX 不解析 HTML 实体，
{"\u00A0"}或{String.fromCharCode(160)} - 服务端渲染（SSR）或静态生成时，确认模板引擎没自动转义，否则
- 国际化文案里硬编码
真正难的从来不是“怎么让空格显示出来”，而是判断“这个空格有没有语义必要”。多数时候，该用 margin、padding 或 text-indent 解决视觉间距，而不是靠空格实体强行撑开布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
