HTML文本溢出隐藏

单行文本

通用

 p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
 }

多行文本

适用于webkit内核，移动端

p {
   display: -webkit-box;
   text-overflow: ellipsis;
   overflow : hidden;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

多行文本js隐藏

通用

// css
#text {
     width: 300px;
     border: 1px solid #000;
     font-size: 20px;
}
// html
<p id="text">一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，</p>
// js
function ellipsis(parent, num) {
    let elem = document.querySelector(parent);
    let text = elem.innerHTML;
    let style = getComputedStyle(elem,null);
    let testElem = document.createElement('span');
    testElem.innerHTML = text.slice(0,1);
    testElem.style.cssText = `position:absolute;font-size:${style.fontSize};opacity: 0`;
    document.body.appendChild(testElem);

    let line = Number.parseInt(style.width) / testElem.offsetWidth;
    let totalLine = text.length / line;

    if (totalLine >= num) {
        text = text.slice(0, line * num).split('');
        text[text.length - 1] = '...';
        text = text.join('')
        elem.innerHTML = text;
    }
    document.body.removeChild(testElem);
}
ellipsis('#text',2);

一行 = 总宽度 / 单个字符宽度 = x 个/行
总字数 / x = 总行
但是中文、数字和英文的单个字符的宽度是不相等的，所以中英数混合下会不正确；默认以第一个字符为参考