CSS小白速进！nowrap和pre用法大不同，不信你看！

还在傻傻分不清 CSS 中 `white-space: nowrap` 和 `white-space: pre` 的区别？别担心，本文为你深度解析这两个属性的特性与应用场景！`nowrap` 强制文本单行显示，忽略空格与换行符，常用于按钮文字等单行展示，但需注意溢出问题。而 `pre` 则像 HTML 的 `

` 标签，忠实保留文本中的空格、Tab 和换行，适合展示代码、日志等需要保持原始格式的内容。本文通过实例代码对比展示 `nowrap` 和 `pre` 在文本换行与空白处理上的差异，助你快速掌握这两个 CSS 属性，告别 CSS 白痴！掌握 `nowrap` 和 `pre`，让你的网页排版更专业、更精细！
<p>white-space: nowrap 和 pre 在文本换行与空白处理上有显著差异。nowrap 强制文本不换行，空格和换行符被忽略，适用于单行显示如按钮文字，可能导致溢出；pre 保留空格、Tab 和换行符，仅在遇到换行符或 br 时换行，适合展示代码、日志等需保持格式的内容。1. nowrap 不换行且忽略空白，2. pre 保留空白并按换行符换行，3. 应用场景不同，前者用于单行文本，后者用于结构化文本展示。</p><p><img src="/uploads/20250622/17506036596858178bb833f.jpg" alt="CSS中white-space属性nowrap和pre的效果区别"></p><p>在CSS中，<code>white-space</code> 属性控制元素内空白的处理方式。当我们用到 <code>nowrap</code> 和 <code>pre</code> 这两个值时，它们虽然都能影响文本换行，但实际效果和适用场景是不一样的。</p><hr><h3><code>white-space: nowrap</code> —— 强制不换行</h3><p>这个值的作用是：<strong>文本不会换行，会一直向右延伸，直到遇到 HTML 元素的边界或手动添加的换行符（如 <code><br></code>）为止</strong>。</p>

• 常见用途：用于单行显示文本，比如表格中的单元格内容、按钮文字等。
• 特点：
  • 空格和换行符都会被忽略
  • 所有文本强制显示为一行
  • 如果容器宽度不够，可能会溢出

举个例子：

<div   style="max-width:100%">
  这是一段很长的文本内容
</div>

上面这段代码的结果是：文本不会自动换行，而是横向延伸，超出容器范围，造成“溢出”现象。

white-space: pre —— 保留空白与换行

这个值的行为更像 HTML 中的

</code> 标签，它会<strong>保留所有空格、Tab 和换行符</strong>，只有当遇到换行符 <code>\n</code> 或 <code><br></code> 时才会换行。</p><ul><li><strong>常见用途</strong>：适合展示代码块、日志、格式化文本等内容。</li><li><strong>特点</strong>：<ul><li>空格和换行符都会被保留</li><li>不会自动换行，除非遇到换行符</li><li>文本会保持原始排版结构</li></ul></li></ul><p>例如：</p><pre class="brush:html;toolbar:false;"><div style="white-space: pre;">
  这    是一个
      测试文本
</div>

显示出来的结果就是你写的内容原样呈现，包括多个空格和换行。

使用上的区别总结

实际应用建议

• 如果你想让一段文本始终显示为一行，并防止自动换行，用 white-space: nowrap；
• 如果你需要保留文本中的缩进、空格、换行结构，比如展示代码片段，那就选 white-space: pre；
• 有时也可以结合其他属性使用，比如配合 overflow: hidden 或 text-overflow: ellipsis 来处理溢出问题；
• 需要注意的是，pre 的行为比较“原始”，有时候可能还需要配合 word-break 或 overflow-wrap 来避免长单词撑开布局。

基本上就这些了。这两个值看似相似，但在细节上差别挺大，选择时要根据实际需求来判断。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。