文本在 3 行后截断 - CSS

当我们需要在页面中显示一段文字时，通常我们并不会对其进行限制，文字会自动换行并显示。但有些情况下，我们需要对文字进行限制，当文字超过一定的行数时，将文字截断并显示省略号。

在 CSS 中，我们可以使用 text-overflow: ellipsis 属性来实现这个效果。同时，我们还需要通过 overflow: hidden 属性来控制文字超出部分的隐藏。

以下是一段 HTML 代码和 CSS 样式代码的示例：

<div class="text-truncate">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut nisi enim, bibendum ac vestibulum ac, sollicitudin quis tortor. Etiam vitae sapien ut libero interdum mattis eu in turpis.
</div>

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 控制截断的行数 */
  -webkit-box-orient: vertical;
}

代码解析：

• overflow: hidden 属性可以隐藏超出部分的文字。
• text-overflow: ellipsis 属性可以在超出部分处显示省略号。
• display: -webkit-box 和 -webkit-box-orient: vertical 属性可以实现将文字作为一个块显示，并在垂直方向上显示。
• -webkit-line-clamp: 3 属性可以控制最多显示的行数。

通过上述 CSS 样式代码，我们将文字的显示限制到了三行，并在超出部分处显示省略号。

此外，我们也可以使用 ::after 伪元素来添加省略号，并可以通过 content 属性来定义其内容，如下所示：

.text-truncate::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
}

上述代码中，我们将省略号的内容定义为 ...，并通过 position 属性控制其位置位于文字的右下角。

综上所述，使用 CSS 的 text-overflow: ellipsis 属性能够方便地将文字在指定行数后进行截断，并通过 ::after 伪元素添加省略号增强显示效果。