CSS的超出省略是一个非常常见的效果,在一些设计风格中用得比较多。而当两行文本展示时,如果第二行超出部分采用省略号来展示,则可以通过以下CSS来实现:.line-2-ellipsis { displa
CSS的超出省略是一个非常常见的效果,在一些设计风格中用得比较多。而当两行文本展示时,如果第二行超出部分采用省略号来展示,则可以通过以下CSS来实现:
.line-2-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
上述CSS的原理就是利用了WebKit内核的box等特性,来对文本进行行数限制。为了实现两行第二行超出省略的效果,我们将display属性设置为-webkit-box,并将行数限制为两行,其中-webkit-box-orient表示容器内部的排列方式,vertical表示垂直排列;-webkit-line-clamp表示最多显示的行数,这里是2行。为了控制超出部分不出现在容器外部,我们还需将overflow设置为hidden。而为了展示省略号,text-overflow属性则需要设置为ellipsis。
然而,这样的方式还存在一个问题:第一行与第二行一样长时,可能会出现第二行省略号出现在第一行的效果。这种情况下,我们可以通过以下CSS来避免此情况发生:
.line-2-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
上述CSS中的word-break就是用来解决这个问题的,将它设置为break-all即可。这样,就可以实现两行第二行超出省略的效果了。
粉丝
0
关注
0
收藏
0