css实现超过两行变省略号

要实现超过两行后显示省略号，你可以使用 CSS 的 line-clamp 属性结合 -webkit-line-clamp 和 -webkit-box-orient 属性来实现。这个方法在大部分现代浏览器中有效。

以下是一个示例：

.multiple-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2; /* 设置要显示的行数 */
}

在上面的示例中，.multiple-lines 类将会在超过两行后自动截断并显示省略号。

实现效果：

下面是一个实现超过两行后显示省略号的效果。

请注意：

display: -webkit-box; 设置为 box 可以让元素表现为一个块级元素，同时也让 -webkit-line-clamp 属性生效。

-webkit-box-orient: vertical; 设置为 vertical 表示文本会垂直排列。

-webkit-line-clamp: 2; 指定了显示的行数为2，超过两行的文本将会被截断并显示省略号。

请注意，这个方法只在部分现代浏览器中有效，对于不支持 -webkit-line-clamp 的浏览器，文本将不会被截断。

-webkit-line-clamp 浏览器兼容性：