CSS如何控制换行？white-space属性全解析

哈喽！今天心血来潮给大家带来了《CSS如何控制换行：white-space属性详解》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

通过 white-space 属性控制文本换行：normal 自动换行并合并空格；nowrap 强制不换行，配合 text-overflow 可显示省略号；pre 保留所有空白符和换行；pre-wrap 保留格式且允许自动换行，适合代码或用户输入；pre-line 合并空格但保留换行。实际应用中，单行文本用 nowrap，多行内容用 pre-wrap，普通文本用 normal，可精准控制文本显示效果。

在CSS中控制文本是否换行，主要通过 white-space 属性来实现。这个属性决定了元素内的空白字符（如空格、换行符）如何处理，以及文本是否自动换行。以下是常用取值及其效果说明。

white-space 常用取值及作用

• normal：默认值。合并连续的空白符，文本在容器边界处自动换行。
• nowrap：合并空白符，但强制不换行。文本会在同一行显示，超出容器也不换行。
• pre：保留所有空白符和换行符，行为类似HTML中的

   标签，只在遇到换行符或<br>时换行。</li>
    <li><strong>pre-wrap</strong>：保留空白符和换行符，允许在必要时自动换行，适合长文本保留格式的同时适应容器宽度。</li>
    <li><strong>pre-line</strong>：合并连续空格，但保留换行符，并允许自动换行。</li>
  </ul><h3>控制不换行：使用 nowrap</h3>
  <font>如果你希望文本始终在同一行显示，即使内容很长，可以设置：</font>
  <p><strong>white-space: nowrap;</strong></p>
  <font>常用于导航菜单、标签、按钮等需要保持单行显示的场景。配合 <strong>overflow: hidden</strong> 和 <strong>text-overflow: ellipsis</strong> 可实现超出部分显示省略号：</font>
  <pre class="brush:php;toolbar:false">white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  控制换行：使用 pre-wrap 或 normal

  当希望文本自动换行，尤其是包含空格或换行符的内容，推荐使用：

  white-space: pre-wrap;

  它能保留原始文本的格式（比如代码、地址等），同时在容器边界处自动折行，避免溢出。适用于用户输入的多行文本展示。 如果只是普通文本内容，使用默认的 normal 就足够，浏览器会自动处理换行。

  实际应用场景建议

  • 单行文本 + 省略号：用 white-space: nowrap 配合 text-overflow
  • 代码块或格式化文本：用 white-space: pre 或 pre-wrap
  • 用户评论、日志等多行内容：推荐 pre-wrap，保留换行且自适应宽度
  • 去除多余空格并正常换行：保持默认 normal 即可
  基本上就这些。掌握 white-space 的不同取值，能精准控制文本的换行行为，提升页面排版的灵活性和可读性。

  文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS如何控制换行？white-space属性全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。