CSS 文本溢出在两行上使用省略号

在本文中，我们将介绍如何使用 CSS 来实现文本溢出时在两行上显示省略号。

阅读更多：CSS 教程

文本溢出

在开发网页时，经常会遇到文本内容超出容器宽度而导致溢出的情况。为了避免这种情况，CSS 提供了一些属性来处理文本溢出问题。其中，text-overflow 属性用于控制溢出文本的显示方式。

单行溢出展示省略号

如果只需要在单行溢出时展示省略号，可以通过以下 CSS 样式实现：

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上述代码中，通过将 white-space 属性设置为 nowrap，强制文本在一行内显示。接着，通过 overflow 属性设置为 hidden，将溢出的文本隐藏。最后，使用 text-overflow 属性设置为 ellipsis，在溢出的文本后面显示省略号。

以下为示例：

<div class="text-ellipsis">
  This is a long piece of text that will be cut off and shown with an ellipsis if it exceeds the container width.
</div>

多行溢出展示省略号

要在多行溢出时展示省略号，需要使用一些额外的 CSS 属性。在 CSS 3 中，引入了 display 属性的新值 box 和 box-orient 属性来实现多行文本溢出的省略号显示。

下面是一种常用的实现方式：

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上述代码中，通过将 display 属性设置为 -webkit-box，可以创建一个块容器，并且容器内的文本会根据 box-orient 属性的值进行布局。将 box-orient 属性设置为 vertical，使得文本在垂直方向上布局。然后，通过使用 -webkit-line-clamp 属性设置为 2，指定在两行内显示文本。当文本溢出容器时，会自动显示省略号。

以下为示例：

<div class="multiline-ellipsis">
  This is a long piece of text that will be truncated to two lines and shown with an ellipsis if it exceeds the container height.
</div>

浏览器兼容性

需要注意的是，多行溢出展示省略号的解决方案可能在不同浏览器上有不同的兼容性。上述示例中使用的 -webkit- 前缀是为了确保在 WebKit 浏览器中生效。因此，在实际开发中，可能需要添加其他浏览器的前缀或使用 JavaScript 来实现更好的兼容性。

总结

CSS 提供了多种方式来处理文本溢出问题。通过使用 text-overflow 属性，我们可以在单行溢出时展示省略号。而对于多行溢出，在 CSS 3 中我们可以使用 -webkit-line-clamp 属性和 -webkit-box-orient 属性来实现。但需要注意不同浏览器的兼容性，可能需要添加不同的前缀或使用其他技术来兼容各种浏览器。希望本文的介绍对你处理文本溢出问题有所帮助。