CSS 文本设置超出2行显示省略号

什么是省略号

在网页开发中，当一段文字的长度超过了容器的宽度，会导致文字被截断并无法完整显示。为了解决这个问题，我们可以使用省略号来表示被截断的文字。省略号即 ...，通过在被截断的文字末尾添加省略号来提醒用户该段文字被省略了。本文将介绍如何使用 CSS 来实现文本超出两行时显示省略号。

使用 `text-overflow` 属性

text-overflow 是 CSS 的一个属性，用于控制文字超出容器时的显示方式。该属性有三个可能的值：clip、ellipsis 和 string。

当值为 clip 时，超出容器的文字将被截断，并不显示省略号；
当值为 ellipsis 时，超出容器的文字将被截断，并在末尾显示省略号；
当值为 string 时，超出容器的文字将被截断，并在末尾显示自定义字符串。

在实现文本超出两行显示省略号时，我们将使用 text-overflow: ellipsis。

使用 `overflow` 和 `white-space` 属性配合

要使 text-overflow 属性生效，还需要配合使用 overflow 和 white-space 两个属性。

overflow 属性控制了当容器内的内容超出容器大小时的处理方式。其可选值有：visible（默认值，内容不被修剪）、hidden（内容被修剪）、scroll（内容通过滚动条进行查看）和 auto（根据内容自动选择滚动条或者修剪）。

为了实现文本超出两行显示省略号的效果，我们需要将 overflow 属性的值设置为 hidden。

white-space 属性则用于指定如何处理元素内的空白字符。常用的值有：normal（默认值，忽略多余空白字符）、nowrap（不换行）和 pre（保留空白字符）。

为了实现文本超出两行显示省略号的效果，我们需要将 white-space 属性的值设置为 nowrap。

使用 `line-clamp` 属性（实验性特性）

CSS 对于文字超出行数进行省略号处理并没有原生的方式，但是有一种实验性的特性叫做 line-clamp 可以实现这个功能，但是目前只有在 Chrome 浏览器中支持。使用该属性只需为容器设置 display: -webkit-box、-webkit-box-orient: vertical 和 -webkit-line-clamp: 2。

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

示例

以下是一个使用 CSS 实现文本超出两行显示省略号的示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 200px;
    }
    .text-ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <div class="container">
    <p class="text-ellipsis">这是一个超出两行显示省略号的文本示例。这是一个超出两行显示省略号的文本示例。</p>
  </div>
</body>
</html>

在浏览器中运行上述代码，即可看到超出两行的文本被截断，并显示省略号。

结论

通过使用 text-overflow、overflow 和 white-space 这几个 CSS 属性，我们可以实现文本超出两行显示省略号的效果。同时，我们也介绍了一种实验性特性 line-clamp，但目前只有在 Chrome 浏览器中有效。在实际项目中，根据浏览器兼容性的考虑，可以选择使用哪一种方式来实现文本截断的效果。