多行文本溢出隱藏處理，兼容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'            
    }
})