17370845950

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）对齐同一套空白语义”。字体、单位、渲染引擎差异都会悄悄吃掉你精心放的空格。