[分享]css两行文字超出省略

CSS中有一个使用场景比较广泛的技巧，就是让两行文字超出时自动省略。这种技巧比较适合在展示列表信息时使用，可以让页面内容更加简洁，美观。实现这种效果非常简单，只需要在CSS中添加以下几行代码即可：.l...

CSS中有一个使用场景比较广泛的技巧，就是让两行文字超出时自动省略。这种技巧比较适合在展示列表信息时使用，可以让页面内容更加简洁，美观。

实现这种效果非常简单，只需要在CSS中添加以下几行代码即可：

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

上述代码中，我们使用了-webkit-box这个CSS属性，它可以让元素在一个指定的高度内以块级格式排列内容。同时，我们还设置了-webkit-line-clamp属性，它可以规定元素内的文本行数。当文本超出指定行数时，就会被省略并显示省略号。

需要注意的是，上述代码中的-webkit-box属性只适用于webkit浏览器，如果需要兼容其他浏览器，可以使用display: -webkit-box; display: -webkit-flex; display: flex;这样的方式来处理。