js实现多行文本溢出省略

实现效果：

css:

    position: relative;
    line-height: 20px;
    max-height: 60px;

js：

function overflowHiddon(el) {
    var s = el.textContent|| el.innerText;
    var n = el.offsetHeight;
    console.log(n);
    for(var i=0; i<s.length; i++) {
          el.innerHTML = s.substr(0, i);
          if(n < el.scrollHeight) {
             el.style.overflow = 'hidden';
             el.innerHTML = s.substr(0, i-3) + '...';
             break;
          }
    }
}

var text = document.getElementsByClassName("text");
for (var i = 0; i < text.length; i++) {
    overflowHiddon(text[i]);
};

 

转载于:https://www.cnblogs.com/-rainbow-/p/9507342.html