CSS 如何在文本溢出时使文本自动换行

在本文中，我们将介绍如何通过CSS实现文本溢出时自动换行的效果。

阅读更多：CSS 教程

white-space 属性

CSS中的white-space属性用于控制元素内文本的处理方式。其中，normal是默认值，文本会在遇到换行符或空格时自动换行；nowrap表示文本不换行，会在一行显示；pre保留空格和换行符，文本会按照实际输入的样子显示。而当设置为pre-wrap时，文本不会保留空格和换行符，但会在遇到换行符或空格时自动换行。

例如，我们可以通过以下CSS代码实现当文本溢出时自动换行的效果：

p {
  white-space: normal;
}

overflow-wrap 属性

在CSS3中，增加了overflow-wrap属性，用于控制文本溢出时的换行规则。该属性有两个可选值：normal和break-word。

当设置为normal时，文本默认换行规则会被使用。而当设置为break-word时，浏览器会尽量将单词切分，以适应容器宽度。

以下是一个示例，展示如何使用overflow-wrap属性来实现文本溢出时自动换行的效果：

p {
  overflow-wrap: break-word;
}

word-wrap 属性

CSS3中的word-wrap属性与overflow-wrap属性类似，用于控制文本溢出时的换行规则。该属性也有两个可选值：normal和break-word。

当设置为normal时，元素默认换行规则会被使用。而当设置为break-word时，浏览器会在单词内部进行换行。

以下是一个示例，展示如何使用word-wrap属性来实现文本溢出时自动换行的效果：

p {
  word-wrap: break-word;
}

text-overflow 属性

除了上述的属性外，还可以使用text-overflow属性来控制如何显示溢出的文本。该属性有三个可选值：clip表示裁剪溢出的文本；ellipsis表示用省略号表示溢出的文本；string表示用指定的字符串表示溢出的文本。

下面是一个示例，展示如何使用text-overflow属性来实现文本溢出时自动换行及省略号显示的效果：

p {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上述示例中，当文本内容超过200px时，将自动换行并在溢出部分显示省略号。

实际应用

除了上述属性，我们还可以结合其他CSS属性来实现更为复杂的文本溢出时自动换行的效果。

例如，我们可以结合max-height和overflow-y属性来实现一个内容区域固定高度，溢出部分自动换行且显示滚动条的效果：

.container {
  max-height: 200px;
  overflow-y: auto;
}

.container p {
  white-space: normal;
}

在上述示例中，当内容超过200px时，容器会显示滚动条，并自动将溢出的文本内容换行显示。

总结

在本文中，我们介绍了通过CSS实现文本溢出时自动换行的几种方法。我们可以使用white-space属性来控制文本的换行方式，使用overflow-wrap或word-wrap属性来控制文本溢出时的换行规则，使用text-overflow属性来控制溢出的文本如何显示。同时，我们还展示了一些实际应用示例，希望能对你理解和应用这些方法有所帮助。