浏览器默认压缩连续空白字符为单个空格，属HTML规范行为；需用 、white-space属性或预格式化标签干预，而非多敲空格。
浏览器默认会把连续空格、制表符、换行符全压成一个空格，这不是 bug，是 HTML 规范行为；想让空格“按你写的那样显示”，必须主动干预，而不是靠多敲几次空格键。
为什么直接敲多个空格没用
HTML 解析器在构建 DOM 前就完成了空白压缩：所有连续空白字符（\t、\n、\r、 ）被统一转为单个 U+0020 空格，首尾空白直接丢弃。你写 <p>hello world</p> 和 <p>hello world</p> 在渲染前就被处理成一样的文本节点。
- 常见错误现象：
<div>姓名： 张三</div>渲染出来仍是“姓名： 张三” - 不是字体或缩放问题，是解析阶段已定型
-
<pre>之所以有效，是因为它绕过了默认压缩逻辑，直接进入“预格式化文本”分支
用 控制单个不可折空格
是最轻量的干预方式，适合单词间防断行或微调间距，但只作用于字符级，不能缩进整段。
- 每个
- 别在
class或id属性里用它——属性值中的 - 和
white-space: nowrap不同：nowrap锁定的是整个元素内容不换行 - 屏幕阅读器会把它读作“不间断空格”，大量堆砌会影响可访问性
用 white-space 属性接管整块文本行为
这是现代项目中最推荐的解法，语义清晰、可维护性强，且能适配响应式场景。
立即学习“前端免费学习笔记（深入）”；
-
white-space: pre-line：保留换行符（\n），合并多余空格，允许在容器边界自动折行 —— 适合地址、评论、日志等后端返回带换行的字符串 -
white-space: pre-wrap：保留所有空格和换行，同时允许折行 —— 适合代码片段、需要对齐又怕溢出的场景 -
white-space: pre：完全保留源码空白，但禁止折行，窄屏易触发横向滚动条 - 注意继承问题：父元素设了
white-space: nowrap（比如某些 UI 库的按钮），子元素即使设pre-wrap也可能被锁死，需显式重置
别滥用 <pre> 标签
<pre> 看似简单，但默认使用等宽字体、自带上下 margin、不响应字体大小变化，容易埋坑。
- 如果只是想保留空格，不用等宽字体，务必加 CSS 重置：
pre { font-family: inherit; white-space: pre-wrap; margin: 0; } - 别把它当“空格万能胶”用在标题、按钮、表格单元格里——破坏语义，SEO 和无障碍支持差
- 移动端尤其危险：
<pre>内容超宽时，iOS Safari 默认不触发overflow-x: auto，用户根本看不到右侧内容 - 若内容含长无空格字符串（如 URL、手机号），仅靠
<pre>或white-space不够，还得加overflow-wrap: break-word
真正难的不是选哪种方法，而是判断“这里到底需不需要空格”——很多所谓“空格问题”，本质是该用 margin 分隔元素、用 text-indent 缩进段落、或用 Flex/Grid 的 gap 控制布局间距，而不是在文本里硬塞空格。
