实现多行超出显示省略号

知有的头像
知有
201

在开发的过程中,我们经常会遇到在文本超出的时候,来显示省略号。

我们先来说如何来实现一个单行的文本超出来显示省略号。

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

这样我们就可以实现一个单行的效果。

对于多行的,我们要使用display:-webkit-box;

下面就是实现的代码:

 overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;/*设置多行的行数*/
用户评论
评论列表