mui css 多行文本的溢出显示省略号(移动端)

一行超出就溢出隐藏

div{

  overflow:hidden;

  text-overflow:ellipsis;

  white-space:nowrap;

}

 

 

两行超出溢出隐藏

div{

   overflow:hidden;    //前两个不变

  text-overflow:ellipsis;

 

white-space:normal ！important;

  display:-webkit-box;/*将对象作为弹性伸缩盒子模型显示*/l

-webkit-line-clamp:2;   限制盒子的显示行数

-webkit-box-orient:vertical; 设置排列方式

 

}

 

但是这个只适用于chrome和移动端。

<div class="ellipsis-2">限制字数为2行限制字数限制字数限制字数限制字数限制字数</div>

好吧，最后能想到的就是在js里面限制字数

$("ellipsis-2"）.each(function(){

  var len=$(this).text().length;

 var maxlen=25;

 if(len>maxlen){ 

        $(this)}.text($(this).text().subtring(0,maxlen))

       $(this).html($(this).html()+"...")

    }

})

 

 

 

mui里面有class直接引用就可以啦

超出一行省略：class="mui-ellipsis"

超出两行省略：class="mui-ellipsis-2"

超出三行省略   class="mui-ellipsis-2"   style="-webkit-line-clamp:3"