CSSwhite-space属性详解与换行控制

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《CSS中white-space控制换行详解》，聊聊，希望可以帮助到正在努力赚钱的你。

white-space属性用于控制空白符处理和文本换行行为，其常用值包括normal、nowrap、pre、pre-wrap、pre-line和break-spaces，不同值对应不同的空白合并与换行规则；通过结合overflow:hidden和text-overflow:ellipsis可避免nowrap导致的文本溢出；white-space与word-break功能不同，后者控制单词内断行方式；在代码格式化中，pre或pre-wrap能保留缩进与换行，常与pre标签或高亮库配合使用以提升可读性。

CSS中的white-space属性主要用来控制元素内的空白格和文本的换行行为。它决定了浏览器如何处理HTML代码中的空格、制表符和换行符，以及文本是否允许自动换行。理解white-space对于控制文本的显示方式至关重要。

解决方案

white-space属性有几个常用的值，它们分别控制着不同的空白和换行行为：

• normal (默认值): 连续的空白符会被合并成一个空格。文本会在适当的位置自动换行。换行符（例如
）会被当作换行来处理。

• nowrap: 与 normal 类似，但会阻止文本自动换行。 文本只会在遇到
标签时换行。如果文本过长，可能会超出容器的边界。

• pre: 保留所有空白符（包括空格和换行符），且文本不会自动换行。 文本会按照源代码中的格式显示，类似于

  </code> 标签。</p></li><li><p><strong><code>pre-wrap</code>:</strong> 保留空白符，但允许文本自动换行。 换行符和 <code><br></code> 标签也会被当作换行来处理。</p></li><li><p><strong><code>pre-line</code>:</strong>  合并空白符，但保留换行符。 文本会在遇到换行符或需要自动换行时换行。</p></li><li><p><strong><code>break-spaces</code>:</strong>  与 <code>pre-wrap</code> 类似，但是会保留所有的空格，即使这些空格会超出容器的边界。 此外，还会添加一些额外的换行规则。</p></li></ul><p><strong>示例代码:</strong></p><pre class="brush:css;toolbar:false;">.normal {
    white-space: normal;
  }
  
  .nowrap {
    white-space: nowrap;
  }
  
  .pre {
    white-space: pre;
  }
  
  .pre-wrap {
    white-space: pre-wrap;
  }
  
  .pre-line {
    white-space: pre-line;
  }
  
  .break-spaces {
    white-space: break-spaces;
  }

  如何使用 white-space 避免文本溢出？

  使用 white-space: nowrap 可以阻止文本换行，但如果文本过长，可能会导致溢出。为了解决这个问题，可以结合以下CSS属性一起使用：

  • overflow: hidden;: 隐藏超出容器边界的内容。

  • text-overflow: ellipsis;: 当文本溢出时，显示省略号。

  示例代码:

  .ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px; /* 设置容器的宽度 */
  }

  这会使超出的文本显示为省略号，避免破坏布局。 当然，仅仅使用 text-overflow: ellipsis 是不够的， 必须同时设置 white-space: nowrap 和 overflow: hidden 才能生效。 否则，省略号不会显示。

  white-space 和 word-break 的区别是什么？

  white-space 主要控制空白符的处理和是否允许自动换行，而 word-break 则控制单词内部的换行方式。

  • word-break: normal;: 使用浏览器默认的换行规则。

  • word-break: break-all;: 允许在单词内的任何字符处换行，即使这样会破坏单词的完整性。

  • word-break: keep-all;: 只能在半角空格或连字符处换行，主要用于非CJK（中文、日文、韩文）文本。

  • word-break: break-word;: 较新的属性，尝试在单词的边界处换行，如果单词过长，则允许在单词内部换行。

  示例代码:

  .break-all {
    word-break: break-all;
  }
  
  .keep-all {
    word-break: keep-all;
  }
  
  .break-word {
    word-break: break-word;
  }

  word-break 属性通常与 white-space 结合使用，以实现更精细的文本控制。例如，可以使用 white-space: pre-wrap 来保留空白符并允许自动换行，同时使用 word-break: break-word 来处理过长的单词。

  white-space 在代码格式化中的应用

  white-space: pre 或 white-space: pre-wrap 在显示代码片段时非常有用。它们可以保留代码中的缩进和换行，使代码更易于阅读。 结合

  </code> 标签或代码高亮库，可以创建出美观且易于理解的代码示例。</p><p>例如，可以使用以下HTML和CSS来显示一段代码：</p><pre class="brush:html;toolbar:false;"><pre class="code">
    <code>
      function helloWorld() {
        console.log("Hello, world!");
      }
    </code>
  

  .code {
    white-space: pre-wrap;
    background-color: #f0f0f0;
    padding: 10px;
    font-family: monospace;
  }

  这会保留代码的格式，并添加背景色和内边距，使其更易于阅读。当然，实际应用中，更常见的是使用专业的代码高亮库，例如 Prism.js 或 highlight.js， 它们能够自动识别代码的语法并进行着色，从而提高代码的可读性。 这些库通常也依赖于 white-space 属性来正确显示代码的格式。

  到这里，我们也就讲完了《CSSwhite-space属性详解与换行控制》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于CSS,text-overflow,white-space,换行,空白符的知识点！