白色空间里的隐藏艺术家：用 CSS 与 HTML 给文本一场优雅的呼吸

在网页上，空白字符常被忽视——空格、换行、缩进、软换行，这些看似无害的符号，却藏着让内容读起来更顺畅、更美观的密码。用好 white-space 的处理，能让你的排版像有了呼吸的节奏，既不拥挤也不松散。

从“挤成一团”到“留白有度”

想象你在写一份产品介绍，关键信息密密麻麻，段落之间没有留白，读者眼睛会像在砂纸上来回磨，疲惫又费劲。而一旦加入恰当的换行与缩进，信息的层次立刻显现，阅读成本直线下降。

white-space 属性的实用面面

CSS 的 white-space 属性是这场改造的总指挥，它决定了空白字符如何被处理：合并、忽略、保留、换行。根据内容与场景选择合适的值，能让页面自动“呼吸”。

• normal：默认值。空白字符被合并，同时按 HTML 标签的自然断行处理，适合大多数内容段落。
• pre：空白字符被完全保留，包括空格、换行与缩进，字体大小与空格宽度成正比。适合代码、诗歌或等宽排版。
• pre-wrap：与 pre 类似，但允许自动换行，既保留格式也避免过长的水平滚动条。
• pre-line：空白字符被合并，所有空白被视为一个空格，这会把长段的换行合并，适合压缩白色空间的场景。
• collapse（非标准，但广泛支持）：空白字符被合并为一个空格，常用于去除多余的空格。

实战场景：从“堆砌”到“呼吸”

场景一：代码区块的呼吸

代码通常需要等宽字体和保留缩进，用 pre 或 pre-wrap 即可。避免使用 collapse，因为它会把缩进也压缩成一个空格，破坏代码的结构。

<pre>
  function helloWorld() {
    console.log("Hello, world!");
  }
</pre>

场景二：长文案的留白

长段文本，如产品介绍或说明文档，建议使用 normal 或 pre-line，将换行与缩进作为信息分层的工具，减少视觉噪音。

<div style="white-space: normal;">
  <p>这是一段需要留白的介绍，通过恰当的换行与缩进，让信息更有层次，阅读更轻松。</p>
  <p>段落之间的间距由浏览器的默认换行策略处理，视觉上更自然。</p>
</div>

场景三：对齐与间距控制

如果需要特定的对齐效果，结合 text-align 与 white-space 的组合使用，能更好地控制文本的视觉对齐。例如，使用 pre-wrap 可以在保持格式的同时，让文本在容器内自动换行。

<div style="white-space: pre-wrap; text-align: left;">
  这是一段对齐于左侧的文本，保留了空格与缩进，同时在容器内自动换行。
</div>

实用技巧：通过 CSS 修复常见问题

• 多余空格：在输入时尽量避免连续多个空格；在 CSS 中使用 white-space: pre-wrap 或 pre 来保留单个空格的语义。
• 不可控的缩进：在生成内容时，使用   代替多个空格来表示单个空格，确保在不同设备上一致显示。
• 避免水平滚动：在容器内设置 overflow: auto 或 overflow: scroll 时，可结合 white-space: pre-wrap 避免过长的水平滚动条。

结语

掌握 white-space 的处理，不仅仅是让页面看起来更整洁，更是让内容与读者之间建立更顺畅的对话。用对空白，让信息自然呼吸，页面也会因此更懂“人情味”。