如何使用 CSS 实现单行、多行的文本截断省略效果？

网页展示中，文本截断展示成省略号（...）的效果时常会被用到。CSS 中，文本的截断效果设置区分单行和多行，各自实现方式是不同的，下面就来学习。

实现单行文本截断效果

最终代码：

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

解释：

1. 文本省略的前提是文本不能折行，因此就要设置 white-space: nowrap。
   • 背景：是否折行的行为由 white-space 属性控制。其默认值是 normal，也就是会自动折行，这是符合直觉的。
2. 文本省略的前提是文本不能溢出到容器范围之外，因此就要设置 overflow: hidden。
   • 背景：文本不折行的情况下，如果容器宽度不够，默认会表现为溢出。这一行为可以通过设置 overflow 属性控制，其默认值是 visible，表现为溢出容器之外。
3. 文本一旦不能换行、不能溢出，就可以为其设置文本截取效果，因为需要表现为文末是三个点“...”的省略效果，所以就要设置 text-overflow: ellipsis
   • 背景：text-overflow 用来控制文本截取效果。有两种可能取值：clip（默认值） 和 ellipsis。因为默认取值 clip 就表现为“截断”效果，这就是在设置完 overflow: hidden 后看到的初始效果了。

实现多行文本截断效果

最终代码：

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 固定搭配 */ 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

这里实现了一个最多显示 3 行就截断文本的省略效果。

解释：

1. 与单行文本相比，首先要移除 white-space: nowrap 规则，多行展示
2. 需要增加 3 个固定 -webkit- 前缀属性。目前这块方案还没标准化。
   1. 提供多行截断环境支持：display: -webkit-box 或 display: -webkit-inline-box
   2. 指定多行截断方向：-webkit-box-orient: vertical - 目前也仅支持垂直方向
   3. 指定截断的行数阈值：-webkit-line-clamp: 3 - 表示文本最多显示 3 行就截断