要实现超过两行后显示省略号,你可以使用 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 浏览器兼容性: