移動端超出三行顯示第三行顯示省略號+查看全部

在做移動端項目的時候遇到需求是移動端超出三行顯示第三行顯示省略號+查看全部，沒有三行則不需要處理，具體思路就是通過容器的高度與文字的行高來計算是否超過三行，然后判斷是否需要顯示省略號與查看全部，結合css目前基本實現了該需求，但是不是很完善，希望有更好辦法的可以互相學習

 

 

css:

.con3 .jianjiecont {
    color: #666666;
    font-size: 0.21rem;
    text-indent: 0.4rem;
    line-height: 0.36rem;
    overflow: hidden;
    zoom: 1;
    position: relative;
}

.con3 .text_con {
    float: left;
    max-height: 0.98rem;
    overflow: hidden;
    color: #aaaaaa;
    line-height: 0.36rem;
}

.con3 .text_dotted {
    position: absolute;

}

.con3 .text_dotted {
    height: 0.36rem;
    width: 1.4rem;
    float: right;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff;
    text-align: right;
    color: #7e9dfd;
    line-height: 0.46rem;
}

.con3 .text_dotted:after {
    content: '...';
    position: absolute;
    left: -0.3rem;
    color: #666666;
}

html:

 <div class="jianjiecont" >
            <div class="text_con" id="text_con" style="line-height: 0.36rem;">跟我學外語學校成立於，此處是機構簡介，此處是機構簡介此處是機構簡介此處是機構簡介此處是機構構簡介此處是機構簡介此處是機構簡介
              </div>
             <div class="text_dotted" id="lookall"  onclick="fnhandler(this)">查看全部</div> 
         </div>

JS:

  var lookAll=document.getElementById('lookall');
       var textCon=document.getElementById('text_con');

      window.onload=function(){
        var textCon=document.getElementById('text_con');
           //總的高度除以行高
           var totalHeight=textCon.offsetHeight;
           var lineHeight=textCon.style.lineHeight;
           var HtmlFontSize=parseInt(document.getElementsByTagName('html')[0].style.fontSize);
           if(totalHeight/(parseFloat(lineHeight)*HtmlFontSize)<2){
              lookAll.style.display="none";
           }
      }

        function fnhandler(obj){
          textCon.style.height='auto';
          obj.style.display="none";
        }