首页 > 移动平台 > 详细

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

时间:2019-06-27 14:56:08      阅读:146      评论:0      收藏:0      [点我收藏+]

这个方法使用的是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);
}
// 两行... 获取行高,如果内容高度超出两行,添加类名实现样式,循环可实现多个位置
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');
        }
    }
}

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

原文:https://www.cnblogs.com/lisaShare/p/11096722.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!