[分享]css中如何设置文字换行显示

在进行CSS样式设计的时候，文字换行的设置是非常重要的一个部分。在本文中，我们将简要介绍一下这方面的内容。一、带有空格的情况在CSS中，我们可以使用whitespace属性来设置文字怎样换行。默认情况...

在进行CSS样式设计的时候，文字换行的设置是非常重要的一个部分。在本文中，我们将简要介绍一下这方面的内容。
一、带有空格的情况
在CSS中，我们可以使用white-space属性来设置文字怎样换行。默认情况下，文字遇到容器边缘时会自动换行。
但是，当我们的文字内容中带有空格时，换行的位置就会发生变化。此时，我们可以使用white-space属性的pre属性值来解决这个问题。pre表示保留原来的所有格式，保留空格和换行符。
例如，下面这段代码：

<p>这是一段       带有空格的文字</p> 

这里的空格并非单纯的按下空格键，而是使用了多个空格或者制表符缩进的。在浏览器中显示时，会自动去除多余空格，但如果我们设置white-space为pre，就可以保留这种格式。
代码如下：

p {
  white-space: pre;
} 

二、超出容器宽度的情况
当我们的文字内容超出容器的宽度时，就需要进行换行处理。同样可以通过white-space属性来实现。
属性值wrap表示超出容器的部分会自动换行到下一行，不会影响单词的完整性。
例如，下面这段代码：

<p>这是一段超长的文字，将会超出容器的范围，需要进行换行处理才能正常显示。</p> 

代码如下：

p {
  white-space: wrap;
} 

还有一种常用的属性值是nowrap，表示文本不允许换行，超出容器宽度的部分将被隐藏。
代码如下：

p {
  white-space: nowrap;
} 

总结：通过white-space属性，我们可以非常灵活地设置文字的换行方式，使得我们的文本内容能够在页面上以最佳的状态呈现。