CSS中,有一种很有用的功能——三个点显示三行。这个功能可以让长段落在不占用太多空间的情况下,展示其重要部分。 p { overflow: hidden; text-overflow: ellipsi
CSS中,有一种很有用的功能——三个点显示三行。这个功能可以让长段落在不占用太多空间的情况下,展示其重要部分。
p { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
在上面的代码中,我们使用了以下属性:
overflow: hidden;
:表示隐藏文字超出部分的内容。text-overflow: ellipsis;
:表示超出部分的内容用三个点代替。display: -webkit-box;
:表示将文本内容按照box方式显示。-webkit-box-orient: vertical;
:表示将box纵向排列。-webkit-line-clamp: 3;
:表示最多显示3行。通过使用这些CSS属性,我们便完成了三个点显示三行的效果。
需要注意的是,这个功能只对部分浏览器支持。在比较老旧的浏览器下,三个点可能无法正确显示。因此我们需要慎重考虑使用。
粉丝
0
关注
0
收藏
0