使用 CSS 实现单行或多行文本溢出显示省略号

在前端开发中，文本溢出，是指文本内容超出容器的宽度或高度。基于设计排版需要对文本内容进行限制，否则导致页面错乱。这时通常的做法是把文本内容限制在容器的宽度或高度内，超出部分显示省略号。本文使用 CSS 实现单行或多行文本溢出显示省略号。

单行文本溢出显示省略号

单行文本溢出显示省略号，是前端开发中常见的需求，简单的使用 text-overflow 属性即可实现。注意，该属性需要对文本限制宽度。

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

现在，我们来看一下效果，我们编写宽度 200 像素的容器，把超出的文本隐藏，显示省略号：

多行文本溢出显示省略号

使用 webkit 的独有 CSS 属性 -webkit-line-clamp，可以实现多行文本溢出显示省略号。

.truncate-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制行数 */
  overflow: hidden;
}

同样，我们查看效果：

该方法支持的浏览器有 Chrome 14+, Firefox 68+, Safari 5+, Edge 79+。支持度还可以，如果需要兼容写法，可以尝试下面的样式：

.truncate-lines-compatible {
  position: relative;
  line-height: 20px;
  max-height: 40px; /* 限制高度：行数乘以行高 */
  overflow: hidden;
}

.truncate-lines-compatible::after {
  content: '...';
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 40px;
  background: linear-gradient(to right, transparent, #fff 55%);
}

可以看到，与 text-overflow: ellipsis 的效果差不多相同，但是兼容性更好，适用于所有浏览器。但是，该方法无法做到自适应文字数量，因为它的高度是固定的，无法根据文本内容自动调整，且文字较少时，也会显示省略号，可能需要 js 动态辅助。