移动端如何实现两行点点点？

这个方法使用的是css伪类+js计算实现

<div cllass="box set-ellip">内容</div>

// less style
.box{
    width: 380/@rem;
    line-height: 40/@rem;
}
.line-clamp{
    position: relative;
    line-height: 1.4em;
    height: 2.8em;
    overflow: hidden;
}
.line-clamp:after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    background:#FFF;
    padding-left: 0.2em;
    // -webkit-box-shadow: 0 0 5/@rem 6/@rem rgba(255,255,255,0.9);
    //-moz-box-shadow: 0 0 5/@rem 6/@rem rgba(255,255,255,0.9);
    //box-shadow: 0 0 5/@rem 6/@rem rgba(255,255,255,0.9);
    background: -webkit-linear-gradient(left, transparent, #fff 55%); // 这个css阴影过渡效果更好些
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

// 两行... 获取行高，如果内容高度超出两行，添加类名实现样式，循环可实现多个位置
ellipEle();
function ellipEle(){
    var ellipEle = $('.set-ellip');
    var lineHeight = parseInt($('.set-ellip').css('line-height')) *2;
    for(var i=0;i < ellipEle.length;i++){
        if( ellipEle.eq(i).height() > lineHeight){
            ellipEle.eq(i).addClass('line-clamp');
        }
    }
}

上面的效果缺点就是字数到头才显示点点点，不是很美观，如果想限制字数点点点的话可以这么做（注意：截取内容中最好不要带特殊字符截取）

以下是简单截取方法

$('.words').each(function(){
      var maxwidth=30;
      if($(this).text().length>maxwidth){
          $(this).text($(this).text().substring(0,maxwidth));
          $(this).html($(this).html()+'...');
      }
});