用 white-space CSS 属性可让HTML原样显示连续空格，推荐 pre-wrap（保留空白且自动换行）；少量空格可用 ，但缩进/对齐应使用 padding、text-indent 或 flex/grid；服务端输出需防 trim，复杂文本优先用 <pre>。
HTML 默认会合并连续空格，怎么让它原样显示
浏览器解析 HTML 时，会把多个连续的 、普通空格、制表符、换行符全部压缩成一个空格——这是 HTML 规范行为，不是 bug。想让“ hello”（两个全角空格）或“ hello”（两个英文空格）原样渲染，得绕过默认的空白处理逻辑。
用 white-space CSS 属性控制空白符行为
最常用且兼容性好的方式是给元素加内联或外部样式，通过 white-space 指定空白处理策略：
-
white-space: pre：保留所有空白符（空格、换行、制表符），但不自动换行（文字超出容器也不折行） -
white-space: pre-wrap：保留空白符，同时允许自动换行（推荐日常使用） -
white-space: pre-line：合并连续空格，但保留换行符并转为<br>效果
示例：
<p style="white-space: pre-wrap;"> 这里有两个前导空格</p>会真实显示那两个空格。
能替代空格，但别滥用
是非断行空格实体，浏览器不会合并它，适合少量、明确需要的空格位置：
立即学习“前端免费学习笔记（深入）”；
- 在单词间插入不可折行的空格，比如“100 km”
- 临时补一个空格避免排版塌陷（如按钮内图标后加空格）
- 但写
真正需要缩进，请用 padding-left 或 text-indent；需要对齐，请用 flex/grid；不要靠堆 。
服务端/模板中输出前注意转义和预处理
如果空格来自后端数据（如数据库字段、用户输入），直接插进 HTML 可能被截断或误解析：
- 确保原始字符串中的空格没被 trim 掉（检查
trim()、strip_tags()等调用） - 输出到 HTML 前，若内容含大量空白且需保留，建议统一包裹一层带
white-space: pre-wrap的<span>或<div> - 避免在 JS 中用
.innerHTML = ' text'直接注入——空格仍会被压缩；改用.textContent+ CSS 控制更可靠
复杂文本格式（如代码块、日志输出）优先考虑 <pre> 标签，它默认等价于 white-space: pre，但语义更准确。
关键不是“怎么多打几个空格”，而是明确你想要的是语义缩进、视觉对齐，还是纯文本忠实呈现——选错方案会导致后期维护成本陡增，尤其是当设计改用响应式网格或国际化多语言时，硬空格几乎必然出问题。
