HTML默认压缩空白符是规范行为，需用 、标签或white-space属性主动干预： 适合少量确定空格；适合代码等需原样渲染的场景；white-space:pre-wrap最平衡，兼顾空格保留与自动换行。
HTML 默认会把连续空格、换行、制表符全部压缩成一个空格，这不是 bug，是规范行为。想保留原样空格，得主动干预。
用 手动替换普通空格
最直接的办法：把需要保留的空格替换成 HTML 实体 （non-breaking space）。它不会被浏览器合并，也不会换行。
适用场景：少量、确定位置的空格，比如「姓名： 张三」、「选项 A B C」。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
- 连用多个
- 不能用于大段文本——可维护性差，且语义不清
用
是语义化标签，浏览器会按源码原样渲染空白符（包括空格、缩进、换行）。
适合场景：代码片段、日志输出、ASCII 图、对齐要求严格的表格式文本。
示例：
Name: Alice Age: 28 City: Beijing注意点：
立即学习“前端免费学习笔记（深入）”；
默认使用等宽字体，若需改字体，得用 CSS 显式设置font-family- 它会保留所有换行，包括你写在 HTML 源码里的多余空行，容易引入意外空白
- 不推荐用于普通段落文字——语义不符，且响应式排版易出问题
用 CSS 的 white-space 属性控制
更灵活的方式：用内联或类样式设置 white-space，常见取值有：
white-space: pre;—— 类似，保留空格和换行，但不强制等宽字体white-space: pre-wrap;—— 保留空格和换行，同时允许自动换行（推荐大多数情况）white-space: pre-line;—— 合并连续空格，但保留换行符（类似普通段落加换行）
示例（保留空格且允许折行）：
这 里 有 多 个 空 格
注意点：
立即学习“前端免费学习笔记（深入）”；
- 不要滥用
white-space: pre;做布局——它会禁用文本自动换行，在窄屏下溢出容器 -
pre-wrap是平衡性最好的选择，既保空格又保可读性 - 该属性对子元素也生效，若内部有
需要不同行为，得单独重置
为什么 加 还是没空格？
常见错误：写了 Text 却发现开头没空格。这是因为 必须紧贴前后内容，中间不能有真实换行或制表符。
错误写法（空格失效）：
Text
正确写法（无换行干扰）：
Text
或者用 white-space: pre 配合普通空格更稳妥：
Text
真正难的不是“怎么加空格”，而是判断该用语义（ ）还是样式（white-space）——选错会导致后期改起来费劲，尤其是内容来自 CMS 或用户输入时。
加
还是没空格？
常见错误：写了 Text 却发现开头没空格。这是因为 必须紧贴前后内容，中间不能有真实换行或制表符。
错误写法（空格失效）：
Text
正确写法（无换行干扰）：
Text
或者用 white-space: pre 配合普通空格更稳妥：
Text
真正难的不是“怎么加空格”，而是判断该用语义（）、实体（ ）还是样式（white-space）——选错会导致后期改起来费劲，尤其是内容来自 CMS 或用户输入时。
