HTML中连续空格默认被浏览器折叠为一个空格，需用 、white-space:pre-wrap或<pre>等方法保留； 适合局部微调，CSS方式适合整块文本，需按场景合理选择。
直接敲出来的连续空格在 HTML 里不会原样显示——这是浏览器的默认行为，不是你写错了。要让它“真显示”，得绕过空白折叠（whitespace collapsing）机制。
为什么敲 5 个空格只显示 1 个
HTML 规范要求解析器把连续的空白字符（空格、制表符、换行）压缩成单个空格，并丢弃首尾空白。所以 <p>hello<span> </span>world</p> 和 <p>hello world</p> 渲染效果完全一样。
用 替代普通空格
这是最常用、兼容性最好的方式：每个 被渲染为一个不可断行、不可折叠的空格。
- 适合段落内局部控制，比如 “姓名：
- 注意：不能写成
   （少分号），必须是 - 多个空格就重复写，如 4 个空格 →
- 不推荐大量使用——源码可读性差，且语义上只是“空格”，不是内容
用 white-space: pre-wrap 控制整块文本
当你有一段含多空格/换行的文本（比如日志、代码片段、对齐表格），用 CSS 更干净：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
div.code-block {
white-space: pre-wrap;
}
这样写在 HTML 里的 <div class="code-block">foo bar</div> 就会保留那 4 个空格。
-
pre-wrap比pre更实用：它保留空格和换行，但允许自动换行 - 别用
white-space: nowrap——它只防换行，不防空格折叠 - 注意继承性：子元素如果设了
white-space: normal，会覆盖父级设置
<pre> 标签能用，但有副作用
<pre> 默认启用 white-space: pre，确实能原样显示空格和换行。
- 问题在于它还强制等宽字体、保留所有缩进，可能破坏设计风格
- 如果你只是想保留空格，又不想改字体或行高，就别硬套
<pre> - 可加 CSS 覆盖：
<pre style="font-family: inherit; line-height: normal;">...</pre>
真正难处理的不是“怎么显示空格”，而是“什么时候该用哪种方式”—— 适合微调，white-space 适合批量，而全角空格或 / 这类实体更适合精确排版（比如单位前留固定宽度）。别在 value 属性里塞 ，也别对整个页面开 pre-wrap，边界感得自己拿捏。
