浏览器默认压缩连续空格为一个，这是HTML规范行为；用 可插入不可折叠空格，white-space属性（pre/pre-wrap/pre-line）能整体控制空白处理，<pre>标签专用于原样显示代码等内容。
浏览器默认会压缩连续空格
HTML解析器在词法分析阶段就把所有空白字符（空格、制表符、换行符）统一转成U+0020，并把连续多个压缩为一个。所以你在源码里写This is，渲染出来仍是This is。这不是bug，是规范行为——它让语义结构不被缩进干扰。
用 插入不可折叠空格
是non-breaking space，它不会被压缩，也不会在行尾断开。适合防止“100 元”被拆成两行，或临时补位。
- 多个
Hello World→ 显示三个空格 - 它不能替代布局：大量使用会让HTML臃肿，且无法响应式缩放
- 别和
<br>
混用想“换行+空格”，
用white-space控制整块文本的空白策略
CSS的white-space属性直接改写浏览器对空白的处理逻辑，比一个个插 更干净。
-
white-space: pre：完全保留源码空格和换行，但不自动折行 → 长文本易横向溢出 -
white-space: pre-wrap：保留换行和空格，同时允许在容器边界自动折行 → 动态内容（如用户评论带\n）首选 -
white-space: pre-line：合并连续空格，但保留换行符 → 适合日志类文本，去冗余又不断行 - 注意：
pre和pre-wrap下text-overflow: ellipsis失效，不能截断加省略号
用<pre>标签包裹需原样显示的内容
<pre>本质是white-space: pre的语义化封装，专为代码、ASCII图、配置片段等设计。
立即学习“前端免费学习笔记（深入）”；
- 它默认用等宽字体，可通过CSS覆盖：
pre { font-family: inherit; } - 嵌套其他标签没问题，比如
<pre><code>console.log(1);</code></pre> - 别用它做段落排版：语义错位，屏幕阅读器会误读为“预格式化内容”，影响可访问性
最常被忽略的是动态内容里的\n：后端返回的字符串含换行符，前端直接插进<div>里根本不会换行——必须显式加white-space: pre-wrap，否则那不是渲染失败，是HTML规则在严格执行。
