浏览器默认合并空白符是html规范行为；可用 控制单个不可折行空格，white-space css属性批量管理空白，慎用标签，避免误用letter-spacing/word-spacing，根本在于厘清布局需求。
浏览器默认会把连续空格、制表符、换行全压成一个空格——这不是 bug，是 HTML 规范行为；想让空格“听话”，得用对方法，而不是狂敲空格键。
用 插入不可折行空格
这是最直接的“单点控制”方式，适合段落内微调，比如防止 “Mr. Smith” 被拆到两行，或在表格单元格里对齐冒号后的内容。
-
- 要 3 个空格就得写
title="a b"无效） - 别用它做整段缩进：语义错误，响应式下容易横向溢出，屏幕阅读器可能读作“不间断空格”而非“空格”
- 它和
white-space: nowrap不同：nowrap是锁住整块元素不换行
用 white-space CSS 属性批量控制空白行为
这是现代、可维护的主流解法，尤其适合代码块、日志、诗歌、地址等含多空格/换行的文本。
-
white-space: pre-wrap最常用：保留所有空格和换行，同时允许内容自动换行（避免横向滚动） -
white-space: pre行为类似<pre class="brush:php;toolbar:false;"></pre>标签：保留空白但禁止换行，超宽内容会撑破容器 -
white-space: pre-line适合富文本场景：合并连续空格，但保留手动换行（\n或<br>） - 注意：该属性作用于整个元素，无法只对某几个词生效；设置后会影响内部所有子文本节点
慎用 <pre class="brush:php;toolbar:false;"></pre> 标签——它不是“空格万能胶”
<pre class="brush:php;toolbar:false;"></pre> 确实原样渲染空格和换行，但自带强约束，容易踩坑。
- 默认使用等宽字体（如
monospace），若没重置font-family，会破坏整体字体风格 - 有默认上下 margin，且内容超宽时会触发横向滚动条（即使父容器设了
overflow: hidden） - 语义上表示“预格式化文本”，用在标题、按钮、导航链接里属于语义污染，影响 SEO 和无障碍访问
- 真要用，建议配合 CSS 重置：
pre { font-family: inherit; white-space: pre-wrap; margin: 0; }
别碰 letter-spacing 和 word-spacing 来“模拟空格”
它们改的是视觉间距，不是真实空格字符，适用场景非常有限。
-
letter-spacing拉开所有字符间隙，英文单词会散架（h e l l o），中文则变成字距过大 -
word-spacing只影响单词间距离，对中文无效（中文无“单词”概念），且不会生成可选中、可复制的空格 - 它们无法用于需要精确提取文本内容的场景（如爬虫、自动化测试、翻译工具）
- 如果目标只是“让两段文字隔开一点”，应该用
margin或padding，而不是伪造空格
真正难的不是选哪种方法，而是判断“这里到底需不需要空格”——多数所谓“空格问题”，其实是布局需求没理清：该用 text-indent 缩进段首，该用 display: flex 对齐，该用 grid-column-gap 控制栅格间距。空格只是表象，结构和样式才是根因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
