移动端超出三行显示第三行显示省略号+查看全部

在做移动端项目的时候遇到需求是移动端超出三行显示第三行显示省略号+查看全部，没有三行则不需要处理，具体思路就是通过容器的高度与文字的行高来计算是否超过三行，然后判断是否需要显示省略号与查看全部，结合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";
        }