文字超出显示....

最近因为项目上的需求，文字超出多少显示...，一开始以为这个很简单，就是写个样式就行了，没想到啊，测试IE的时候出现问题了，不显示，周六收到测试人员打电话问怎么回事啊。。。。当时听到我也很无奈的，我记得我测的没问题啊（Chrome），抓紧给人家说你换成Chrome试一下，结果还真是。 然后肯定是样式不兼容导致的了。 网上大多数都是这样写得

    overflow:hidden;
    text-overflow:ellipsis; 
    -webkit-line-clamp:3;
    word-break: break-all;
    -webkit-box-orient:vertical;
     display: -webkit-box;
复制代码

我不知道为什么我的只是显示一行，我设置了显示三行，但是不起作用。 实在不想折腾css，索性就直接使用js来，这个时候有个问题，因为没办法计算每一个字符的宽度，只能一个一个的调试。如果兄弟你知道如何计算每一个字符的宽度请留下你的代码我学习一下。

/**
  * 超出部分显示···
  * params:num type:number,com type:string
  * num 控制显示字符长度，com控制显示dom元素
  */
  function mitulineHide(num,com){
    let contain = document.querySelector(com);
    console.log(contain);
    let maxSize = num;
    let txt = contain.innerHTML;
    if(txt.length > num){
      console.log(1)
      txt = txt.substring(0,num-1)+"...";
      contain.innerHTML = txt;
    }else{
      return;
    }
  }

  mitulineHide(70,"p");
复制代码

转载于:https://juejin.im/post/5c971ff16fb9a070b33c5a91