900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 纯css控制文字2行显示多余部分隐藏

纯css控制文字2行显示多余部分隐藏

时间:2020-02-27 21:33:08

相关推荐

纯css控制文字2行显示多余部分隐藏

在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制:

css代码如下:

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

3行代码搞定,这个很常见。但是要是2行文字显示多余隐藏呢,我之前在网上搜到的很多说什么用js去控制,用php控制。。。等等诸如此类的复杂方法,为什么不能同样用css去控制呢?后来找到答案了,用css同样可以去控制2行文字显示多余隐藏。

text-overflow:-o-ellipsis-lastline;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; 更方便的是改变webkit-line-clamp的值还可以实现3、4、5等等多行文字显示多余隐藏的效果~

来源:/this_itboy/article/details/51799086

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。