css 两行省略号 |html css实战教程 pdf下载

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

其中，overflow: hidden用于隐藏超出容器的文本，text-overflow: ellipsis用于显示省略号，display: -webkit-box和-webkit-box-orient: vertical用于将文本按竖直方向排列，-webkit-line-clamp: 2用于限制文本显示的行数。

需要注意的是，这段代码只对webkit核心浏览器（如Chrome、Safari等）有效，如果要兼容其他浏览器，可以使用以下代码：

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

这样就可以在大多数现代浏览器中实现两行省略号了。