HTML打印时普通空格被折叠,但 (\u00A0)保留;white-space属性在打印中生效,需显式设置pre/pre-wrap/pre-line;text-indent和letter-spacing不失效但易误用;推荐inline-block或ch/em单位实现可控空隙。

打印时 会保留,但普通空格会被折叠
HTML 渲染时默认用 white-space: normal,这导致连续空格、换行、制表符在屏幕和打印中都会被合并成单个空格。但 (不换行空格)是 Unicode 字符 \u00A0,浏览器视作“不可折叠的字符”,打印样式表(@media print)里它依然可见、占位、不换行。
white-space 在打印样式中是否生效
生效,但需显式设置。打印引擎(如 Chrome / Edge 的 PDF 导出、系统打印对话框)基本遵循 CSS 规范,white-space: pre、pre-wrap、pre-line 均可控制空格行为:
-
pre:保留所有空白符(空格、换行、制表符),不自动换行 -
pre-wrap:保留空白符,但允许换行(最常用) -
pre-line:合并连续空格,但保留换行符
注意:不要依赖全局重置,应在具体容器上设置,例如:
div.print-content {
white-space: pre-wrap;
}
常见踩坑:CSS text-indent 和 letter-spacing 在打印中失效?
不会失效,但容易被忽略其作用对象:
立即学习“前端免费学习笔记(深入)”;
-
text-indent只影响首行缩进,对纯空格排版无用 -
letter-spacing对空格也起作用——它会拉大空格宽度,但无法“插入”空格 - 用
margin-left或padding-left比靠一堆更可控 - 某些打印机驱动或 PDF 转换器(如 wkhtmltopdf 旧版)可能忽略
letter-spacing,建议实测
替代方案:用 display: inline-block 模拟固定空隙
当需要精确控制两个词之间的“2 字符宽”空隙(且不能用 因为语义不清或缩进不一致),可改用无内容元素:
这样更稳定,不受字体、字号缩放影响,也便于通过类名统一维护。注意 ch 单位基于当前字体的 0 字符宽度,在等宽字体下最可靠;若非等宽字体,可用 em 替代(如 1em ≈ 当前字号宽度)。
真正难处理的是混合中英文场景下的空格对齐——这时候别硬扛,该用表格就用表格,该导出 PDF 就走服务端渲染。











