多行文本溢出隐藏处理，兼容ie，火狐

问题

多行文本溢出隐藏，webkit内核浏览器如谷歌支持如下写法：

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

而其他内核不支持，如IE和火狐，故用JS做兼容

思路

获取目标文本行高line-height，内容高度offsetHeight

假设 x 行文本溢出隐藏

内容高度除以行高大于x，则加上溢出隐藏的css类名

效果图

 

html代码

<div class="textBox">
    <div class="text texter">我是时代的残党，新世界没有载我的船。我是时代的残党，新世界没有载我的船。</div>
</div>
    
<div class="textBox">
    <div class="text texter">我是时代的残党，新世界没有载我的船。我是时代的残党，新世界没有载我的船。</div>
</div>

<div class="textBox">
    <div class="text texter">我是时代的残党，新世界没有载我的船。我是时代的残党</div>
</div>
<div class="textBox">
    <div class="text texter">我是时代的残党，新世界没有载我的船。我是时代的残党</div>
</div>

 

css代码

textBox{
    padding:10px;
    margin-bottom:40px;
    width:14em;
    border:1px dashed #000000; 
}
.text{ 
    line-height:14px;
    font-size:14px;
    overflow:hidden;
    position:relative;
}
.texter{
    height:28px;
}
.texter:after{
    content: ' ... ',
    position:absolute;
    bottom:0;
    right:0;
    padding-left:10px;
    background: -webkit-linear-gradient(left,transparent, #fff 40%); /* Safari 5.1-6.0 */
    background: -o-linear-gradient(left, #fff 50%); /* Opera 11.1-12.0 */ 
    background: -moz-linear-gradient(left, #fff 50%); /* Firefox 3.6-15 */
    background: linear-gradient(); /* 标准语法 */
}

 

JS代码

var oList = document.querySelectorAll('.text');
oList.forEach(function(item){
    var oHeight = item.offsetHeight;
    if((oHeight/14)>2){
      item.className = 'text texter'            
    }
})

 

转载于:https://www.cnblogs.com/zsxblog/p/11197300.html