CSS 如何在文本换行时显示省略号

在本文中，我们将介绍如何使用 CSS 在文本换行时显示省略号。换行时显示省略号可以提高页面的美观性，同时也能够避免文本过长超出容器的问题。

阅读更多：CSS 教程

word-wrap 和 text-overflow 属性

要实现文本换行时显示省略号，我们可以结合使用word-wrap和text-overflow两个CSS属性。其中，word-wrap属性用于控制长单词或URL的自动换行行为，而text-overflow属性用于设置当文本溢出容器时如何显示。

word-wrap

word-wrap属性有两个可能的值：normal和break-word。当设置为normal时，长单词或URL会延伸到容器之外而不会换行。当设置为break-word时，长单词或URL会被强制换行并适应容器的宽度。

例如，假设我们有一个固定宽度的容器，其中包含一个较长的文本：

<div class="container">
  <p class="text">这是一个非常非常非常非常非常非常非常非常非常非常长的文本。</p>
</div>

在CSS中，我们可以如下设置：

.container {
  width: 200px;
}
.text {
  word-wrap: break-word;
}

上述代码中，我们将容器的宽度设置为200px，并将文本的word-wrap属性设置为break-word。当文本长度超过200px时，文本会自动换行并适应容器的宽度。

text-overflow

text-overflow属性有三个可能的值：clip、ellipsis和initial。当设置为clip时，超出容器的文本会被裁剪。当设置为ellipsis时，超出容器的文本会显示省略号。当设置为initial时，text-overflow属性会重置为默认值。

为了实现在文本换行时显示省略号，我们需要将text-overflow属性设置为ellipsis，并且要结合overflow属性使用。overflow属性用于控制内容溢出容器时的行为。

.container {
  width: 200px;
  overflow: hidden;
}
.text {
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}

上述代码中，我们将容器的宽度设置为200px，并将overflow属性设置为hidden，以隐藏超出容器宽度的部分文本。同时，我们将文本的word-wrap属性设置为break-word，white-space属性设置为nowrap（以防止文本换行），并将text-overflow属性设置为ellipsis来显示省略号。

示例

为了更好地理解如何实现文本换行时显示省略号，我们来看一个具体的示例。假设我们有一个固定宽度的容器，其中包含一段长文本：

<div class="container">
  <p class="text">这是一个非常非常非常非常非常非常非常非常非常非常长的文本。</p>
</div>

在CSS中，我们可以这样设置：

.container {
  width: 200px;
  overflow: hidden;
}
.text {
  word-wrap: break-word;
  white-space: nowrap;
  text-overflow: ellipsis;
}

上述代码中，我们将容器的宽度设置为200px，并使用overflow属性将超出容器宽度的部分文本隐藏起来。同时，我们将word-wrap属性设置为break-word以实现文本自动换行，将white-space属性设置为nowrap以防止文本换行，最后将text-overflow属性设置为ellipsis来显示省略号。

如此一来，当文本长度超过200px时，文本会自动换行并在超出容器的位置显示省略号。这样一来，即使文本很长，也能够保持页面的美观性和整洁性。

总结

通过结合使用word-wrap和text-overflow属性，我们可以很容易地实现在文本换行时显示省略号的效果。利用word-wrap属性来控制文本的自动换行行为，再结合text-overflow属性来控制文本溢出容器时的显示效果，我们可以使页面的文本在换行时能够显示省略号，从而提高页面的美观性和可读性。

希望本文对你理解CSS如何在文本换行时显示省略号有所帮助！