这个方法使用的是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');
}
}
}
移动端如何实现两行点点点?