HTML默认合并连续空白并忽略首尾空格,这是white-space:normal的规范行为; 防断行, ≈0.5em, ≈1em;CSS white-space(如pre-wrap)比实体更可靠,打印时需注意字体与渲染差异。

HTML 中普通空格为什么经常不显示
浏览器默认会把连续的空白字符(空格、制表符、换行)合并成一个空格,且首尾空格会被忽略。这不是 bug,是 HTML 规范定义的 white-space 默认行为(white-space: normal)。
- 写两个空格:
→ 渲染为一个空格 - 写换行加缩进:
→ 实际显示为hello
hello,无缩进 - 用空格对齐文字?基本不可靠,除非改样式或换符号
和 / 的区别
它们都是 HTML 字符实体,但宽度和语义不同:
-
:不换行空格(non-breaking space),等宽于常规空格,但不会被折叠,也不会在行末断开 -
:en 空格,宽度 ≈ 字体中一个n字符的宽度(通常为 0.5em) -
:em 空格,宽度 ≈ 当前字体的em高度(通常为 1em),接近一个汉字宽度
注意:这些实体在打印样式(@media print)中一般能保留,但部分旧打印机驱动或 PDF 转换工具可能忽略或替换为普通空格。
CSS white-space 控制空格渲染更可靠
比起堆砌 ,直接控制容器行为更可控,尤其涉及代码、日志、对齐文本时:
立即学习“前端免费学习笔记(深入)”;
-
white-space: pre→ 保留所有空白和换行,类似标签 white-space: pre-wrap→ 保留空白和换行,但允许自动换行(最常用)white-space: pre-line→ 合并空格,但保留换行符- 打印样式中建议显式设置:
@media print { .log-output { white-space: pre-wrap; } }
打印样式里空格“消失”的真实原因
不是空格没传过去,而是多数浏览器打印预览/导出 PDF 时会重置部分 CSS,并降级处理某些字体度量(比如把 当作普通空格)。常见表现:
- 页面上看是缩进两格,打印出来变成一格甚至无缩进
-
在行尾被截断(因换行策略变化) - 使用等宽字体(如
font-family: monospace)可显著提升一致性 - 终极保险方案:用
display: inline-block+width模拟固定空格,例如
真正难处理的不是“怎么打空格”,而是“怎么让不同输出通道(屏幕 / 打印 / PDF)对齐同一套空白语义”。字体、单位、渲染引擎差异都会悄悄吃掉你精心放的空格。











