浏览器默认压缩空白符是HTML规范行为，需用 、white-space属性或<pre>标签干预； 适合零星空格，white-space:pre-wrap最常用，<pre>适用于格式即内容的场景。
浏览器默认把连续空格、制表符、换行符都压缩成一个空格，这不是 bug，是 HTML 规范行为（white-space: normal）。想保留多个空格，得主动干预渲染逻辑。
用 插入不可折叠空格
这是最轻量、语义最明确的方式，适合零星调整，比如“姓名： 张三”中间加两个空格对齐。
-
- 连续写多个，如
- 不能用于属性值内部，比如
<div class="box active"> 会解析失败 <li>无法用 CSS 控制宽度，所有 <code>宽度固定，且依赖当前字体 -
white-space: pre：保留所有空格和换行，但禁止自动换行（内容超宽会溢出） -
white-space: pre-wrap：保留空格和换行，同时允许长单词内断行，日常最常用 -
white-space: pre-line：合并空格但保留换行符，适合清理冗余空格又想保留段落结构 - 别直接设
white-space: pre在全局<body>或大容器上，容易破坏按钮、导航等组件的排版 - 它默认启用
white-space: pre，且强制等宽字体，保留所有空白和换行 - 若要取消等宽字体，必须显式重置：
<pre style="font-family: inherit;"> - 不要嵌套在
<p>内——<pre>是块级元素，HTML 解析器会自动闭合前面的<p> - 编辑时需注意源码缩进：你在 HTML 文件里敲的空格，就是最终显示的空格
用 white-space CSS 属性控制容器空白处理
适用于整段文本需保持原始缩进或空格格式的场景，比如代码片段、日志输出、ASCII 艺术。
用 <pre> 标签包裹纯文本块
当一段内容本身就是「格式即内容」时（如终端输出、配置文件片段），<pre> 是语义最正确的选择。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：空格问题从来不是孤立存在的。比如表格中用 对齐单元格，不如用 text-align + padding；用 white-space: pre-wrap 渲染用户输入内容时，记得先做 XSS 过滤——因为换行和空格可能裹着恶意标签进来。
