文字超出顯示....

Visupervi Reborn發表於2019-03-24

最近因為專案上的需求，文字超出多少顯示...，一開始以為這個很簡單，就是寫個樣式就行了，沒想到啊，測試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");
複製程式碼

相關文章