为什么你的文字“缩在一起”？HTML 换行与空格的避坑指南

写网页时最怕遇到什么？复制粘贴一段精心排好的文案到后台，前端渲染出来却挤成一团。原本想分段的，变成了一行；原本想缩进的两个字，直接贴脸输出。很多新人第一反应是疯狂敲空格或者硬塞 <br> 标签，结果维护起来一团糟，甚至导致移动端显示错位。

要搞定这个问题，得先理解浏览器的“脾气”。浏览器默认会把连续的多个空白符（包括空格、Tab、回车）压缩成一个空格处理。这是为了节省页面空间，也是 HTML 的初衷——它只关心语义，不关心视觉排版。所以在普通 <div> 里，你按十次回车和按一次回车，效果是一样的。

如果必须强制换行，<br> 标签确实是直接手段，但它属于表现层元素。除非是在诗歌、地址这种明确需要保留视觉断行的场景，否则尽量用语义化标签替代。比如真正的段落拆分，应该使用 <p> 标签而非两个 <br>。这样做不仅代码整洁，对屏幕阅读器也更友好，搜索引擎也更容易抓取结构。

至于空格，很多人习惯用  （不间断空格）来模拟缩进或增加间距。这招虽然在某些老旧系统里能救急，但过度依赖会导致代码臃肿，且在某些极端布局下可能破坏响应式流。更推荐的做法是利用 CSS 的 padding 或 margin 来控制间距，这样既符合样式分离原则，又能随容器自适应缩放。

真正解决“缩文本”痛点的高阶方案，藏在 CSS 的 white-space 属性里。这才是控制空白行为的核武器，比乱堆标签靠谱得多。

如果你希望代码块里的格式原样保留，包括所有的空格和换行，设置 white-space: pre-wrap; 是最佳选择。它会保留空白字符并自动折行，避免横向滚动条溢出。而如果是处理用户输入的评论或文章，想要保留手动回车的换行，但自动合并多余空格，可以用 white-space: pre-line;。这两种写法直接解决了大部分富文本展示的难题，无需在数据库里清洗成千上万的标签。

另外，别忘了针对特殊内容使用原生标签。比如展示邮箱地址、电话或地址信息，直接用 <address> 标签包裹，既能体现语义，部分浏览器也会给予特定的样式处理。如果是展示代码片段，务必搭配 <pre> 和 <code> 组合，再辅以背景色，这才是标准姿势。

最后总结一下思路：遇到排版乱了，先别急着加标签。检查是不是缺少了必要的 CSS 样式控制，确认是否混淆了内容与表现层的职责。把换行交给 CSS 的 white-space 去管，把缩进交给 margin/padding 去管，把段落结构交给语义标签去管。这套组合拳打下来，不仅能减少后期维护成本，还能让页面在不同设备上的表现更加稳定。技术没有捷径，选对工具往往比盲目努力更重要。