使用纯 CSS 实现多行截断

本文中的技巧仍然非常巧妙，但现在有一种 标准化的方法 可以实现这一点，这可能是最好的选择。

如果要截断一行文本，则可以使用 相当直接的方法。截断多行文本则比较困难。仅使用 CSS（不使用 JavaScript 或服务器端操作）非常简单。近年来，由于 Firefox（从 68 版本开始）开始支持 非常奇怪的 -webkit-line-clamp 方法，因此对该方法的浏览器支持变得相当不错。

但是，还有一种方法非常巧妙，可以称之为真正的 CSS 技巧。我们在 关于行截断的规范文章 中没有很好地介绍它，因此我将在本文中介绍，然后将其添加到该文章中。我第一次看到这个技巧是在现已关闭的 Mobify 博客上，最近 由 Natalia Onischuk 在 HackingUI 上介绍。

技巧使用行高进行测量

这是一个重要的技巧。假设一个元素的 line-height 为 1.4rem，并且您希望确保它只显示最多三行文本。如果将 max-height 设置为 1.4rem * 3，那么您就完成了！

我不是特别喜欢统一的 line-height，但是在这里，它对于进行计算是必要的。我也不喜欢在元素上反复设置它，因此让我们设置一个变量，稍后可以使用它，然后使用它来设置全局 line-height。

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

设置该最大高度

截断就是这样发生的

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

实际上，您可以保留这种状态。如果您不关心省略号，这可能就足够了。

当您想要显示省略号时，技巧的其余部分就派上用场了

省略号（“…”）表示文本已截断，并且比显示的内容更长。在截断文本时使用省略号可能是一个不错的做法，这样内容就不会以突然的、奇怪的方式结束。（好吧，内容本身可能很奇怪，但是，您已经尝试过了。）

如果在元素上设置 position: relative，则可以在右下角绝对定位省略号。

.truncate-overflow::before {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}

我非常想，不是设置底部，而是设置顶部并使用 top: calc(var(--lh) * (var(--max-lines) - 1))。我的想法是，您也可以将省略号放置在您需要的确切位置。如果文本太短，隐藏的溢出将将其截断。这样做的问题是，它没有解决“恰好为最大行数”问题。当文本与最大行数匹配时，省略号将显示出来——而不仅仅是在超过该空间时显示。

我们必须更加巧妙！

请注意，这种“在右下角设置内容”的方法非常适合从左到右的语言。我将使用 CSS 逻辑属性（例如 inset-inline-end 而不是 right）来制作演示，以期使其更便于各种语言和流场景使用。

另一个限制是，省略号不会附加到最后一个单词，因为它是在绝对位置放置的。我们也不会解决这个问题。

如果文本太短，就隐藏省略号

这是技巧的第二部分。如果我们始终将绝对位置设置在文本的底部/末尾，那就没问题。但如果文本恰好等于 --max-lines 值或更短，我们希望将其隐藏。

技巧是，创建一个与背景相同的小方框，将其放在省略号上面将其覆盖。我们可以使用另一个伪元素来做到这一点

.truncate-overflow::after {
  content: "";
  position: absolute;
  right: 0; /* note: not using bottom */
  width: 1rem;
  height: 1rem;
  background: white;
}

我们在这里使用的另一个技巧是不设置底部 (inset-block-end) 属性。这会将方框放置在内容底部，而不是相对父元素的底部，这非常有用。

我将方框设置为红色，以便您在这三个不同的示例中看到它们

演示

我使用 想要使用 CSS 逻辑属性，因为浏览器支持已经非常不错了。如果您支持任何版本的 IE，则需要使用 bottom 和 right。

辅助功能问题

Joseph Scherben 提到

如果元素包含交互式元素，并且溢出是隐藏的（不是滚动），则这些元素将可聚焦，但在网站上不可见。这会导致键盘/辅助工具用户在隐藏的剪裁内容中迷失方向