css文本溢出出现省略号
发布于 3 年前 作者 jing00 3481 次浏览 来自 分享

我们通常在写页面样式的时候想要实现一串文字超出我们指定的宽度就将他隐藏并且呢,加上省略号,这个呢非常简单直接看代码

单行文本溢出隐藏显示省略号:

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

但是有些时候呢我们就想要他显示3行在隐藏,那么使用上面的样式就不能够实现当下的问题了,这边我也同样贴出代码供使用

text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

tips:多行文本溢出隐藏时,-webkit-line-clamp: 2; 把2改成几就显示几行。灵活多变。

回到顶部