基于 CSS，文本溢出显示省略号（ellipsis）

轩帅

在 Web 应用开发，常遇到些诉求，即“文本倘若溢出，以省略号代替原本内容”；尤其针对动态内容，这不仅能够有助于 UI 美观，也能起到优化性能的作用（可提前规定区块高度，优化「累积布局偏移」（CLS：Cumulative Layout Shift）。除了基于 JavaScript 动态计算，采取 CSS 是更加可取的方案。本篇文章旨在探讨下：基于 CSS，如何处理文本溢出显示省略号。

单行

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

多行（3）

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

多行（4）

display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

预处理封装

// mixin 封装
@mixin text-ellipsis-multiline($num: 3) {
  display: -webkit-box;
  -webkit-line-clamp: $num;;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 使用
.article-desc {
  color: #9393aa;
  font-size: 1.6rem;
  line-height: 1.8rem;
  @include text-ellipsis-multiline(2);
}

说明解释

text-overflow：
- clip : 　不显示省略标记（...），而是简单的裁切；
- ellipsis : 　当对象内文本溢出时显示省略标记（...）；
-webkit-line-clamp：用来限制在一个块元素显示的文本的行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
display: -webkit-box：将对象作为弹性伸缩盒子模型显示；
-webkit-box-orient：设置或检索伸缩盒对象的子元素的排列方式（vertical）；
text-overflow: ellipsis：以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本；

独立开发项目：倾城之链列表项，因为每条内容长度不同，如完全显示，则导致高度不一，影响美观。采用如上方式做了优化后，即可解决。而且可以为列表设置固定高度，从而使得 Cumulative Layout Shift (CLS) 得到很大改善。