截断两行 CSS(空白 nowrap 2 行)

当文本或其它元素的长度超出了其容器的可用空间时，我们可以使用 CSS 的 overflow 属性来处理溢出的内容。但是如果我们只想截断一部分文本，让它以省略号（...）的形式显示，该怎么做呢？

下面是一种方便的解决办法：使用 white-space、overflow 和 text-overflow 属性以及特定的 width 值，在不占用太多空间的前提下，截断最多两行文本。

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

以上 CSS 将元素的文本限制在容器的宽度内，截断多余的文本并在最后添加省略号。在此基础上，-webkit-box 和 -webkit-line-clamp 属性将内容限制在最多两行，而 -webkit-box-orient 确定了文本溢出时的截断方向。

这个技巧在实现类似卡片式布局或展示新闻列表等情形时非常有用。