CSS小白速看！nowrap和pre影响文字换行差别居然这么大？

CSS中的 `white-space` 属性是控制文本换行的关键，其中 `nowrap` 和 `pre` 两个值虽然都与换行有关，但实际效果却大相径庭。`white-space: nowrap` 强制文本不换行，忽略空格和换行符，常用于单行文本展示，如按钮文字，但可能导致内容溢出。而 `white-space: pre` 则保留文本中的空格、Tab 和换行符，仅在遇到换行符或 `
` 标签时才换行，非常适合展示代码、日志等需要保持原始格式的内容。理解 `nowrap` 和 `pre` 的区别，能帮助开发者更精准地控制页面文本的显示效果，提升用户体验，避免布局问题。本文将深入探讨这两个属性值的特性、应用场景及使用建议，助你告别CSS白痴，玩转文本换行！

white-space: nowrap 和 pre 在文本换行与空白处理上有显著差异。nowrap 强制文本不换行，空格和换行符被忽略，适用于单行显示如按钮文字，可能导致溢出；pre 保留空格、Tab 和换行符，仅在遇到换行符或 br 时换行，适合展示代码、日志等需保持格式的内容。1. nowrap 不换行且忽略空白，2. pre 保留空白并按换行符换行，3. 应用场景不同，前者用于单行文本，后者用于结构化文本展示。

在CSS中，white-space 属性控制元素内空白的处理方式。当我们用到 nowrap 和 pre 这两个值时，它们虽然都能影响文本换行，但实际效果和适用场景是不一样的。

white-space: nowrap —— 强制不换行

这个值的作用是：文本不会换行，会一直向右延伸，直到遇到 HTML 元素的边界或手动添加的换行符（如
）为止。

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

举个例子：

  这是一段很长的文本内容

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

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

这个值的行为更像 HTML 中的

 标签，它会保留所有空格、Tab 和换行符，只有当遇到换行符 \n 或 
 时才会换行。
常见用途：适合展示代码块、日志、格式化文本等内容。
特点：
空格和换行符都会被保留
不会自动换行，除非遇到换行符
文本会保持原始排版结构
例如：

  这    是一个
      测试文本
显示出来的结果就是你写的内容原样呈现，包括多个空格和换行。
使用上的区别总结
特性
nowrap
pre
是否换行
否（除非手动加 
）
否（除非遇到换行符）
空格是否保留
否
是
换行符是否生效
否
是
自动换行
否
否
常见使用场景
单行文本展示
代码、日志、格式文本
实际应用建议
如果你想让一段文本始终显示为一行，并防止自动换行，用 white-space: nowrap；
如果你需要保留文本中的缩进、空格、换行结构，比如展示代码片段，那就选 white-space: pre；
有时也可以结合其他属性使用，比如配合 overflow: hidden 或 text-overflow: ellipsis 来处理溢出问题；
需要注意的是，pre 的行为比较“原始”，有时候可能还需要配合 word-break 或 overflow-wrap 来避免长单词撑开布局。
基本上就这些了。这两个值看似相似，但在细节上差别挺大，选择时要根据实际需求来判断。
好了，本文到此结束，带大家了解了《CSS小白速看！nowrap和pre影响文字换行差别居然这么大？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！