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;这样的方式来处理。
粉丝
0
关注
0
收藏
0