CSS 多行文本省略号

在本文中，我们将介绍如何使用CSS实现多行文本的省略号效果。

阅读更多：CSS 教程

1. 单行文本省略号

首先，我们来看一下如何使用CSS实现单行文本的省略号效果。当文本超出容器宽度时，我们可以使用text-overflow属性来设置省略号。同时，我们还需要设置white-space属性为nowrap，这样可以防止文本换行。接下来，我们还需要设置overflow属性为hidden，这样超出容器宽度的文本就会被隐藏起来。下面是一个示例：

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

在上面的示例中，我们创建了一个宽度为200px的容器，文本超出容器宽度时会出现省略号。

2. 多行文本省略号

那么，如果我们需要在多行文本中实现省略号效果呢？CSS并没有直接提供多行文本的省略号属性，但是我们可以借助一些技巧来实现。下面是一种常用的方法：

首先，我们需要设置display属性为-webkit-box，并且设置-webkit-line-clamp属性为希望展示的行数。同时，我们还需要设置-webkit-box-orient属性为vertical，这样可以实现垂直排列的效果。最后，我们需要设置text-overflow属性为ellipsis，这样超出容器宽度的文本会被省略号替代。

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

在上面的示例中，我们将文本显示限制为两行，超出两行的文本会出现省略号。

需要注意的是，上面的示例只适用于WebKit浏览器，如果需要兼容其他浏览器，可以使用下面的兼容性写法：

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. 文字在第二行出现省略号

有时候，我们需要在文字的第二行出现省略号。要实现这个效果，我们可以借助伪元素::before来生成一个看似是第二行的空白元素，并设置宽度和高度满足文本的第二行要求。具体代码如下：

.container {
  position: relative;
  width: 200px;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: -1em;  /* 与第一行文字的行高相等 */
  width: 100%;
  height: 1em;  /* 与第一行文字的行高相等 */
  background: linear-gradient(to right, transparent, #fff 50%);  /* 为了遮挡多余的文字 */
  pointer-events: none;  /* 禁用伪元素的鼠标事件 */
}

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

在上面的示例中，我们创建了一个容器，并使用伪元素::before生成了一个看似是第二行的空白元素。我们还需要设置容器的position为relative，这样伪元素的定位会相对于容器进行。通过计算伪元素的宽度和高度，我们可以让其覆盖到文字的第二行，然后使用背景渐变将超出的文字遮挡住。