單行文本
通用
p {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
多行文本
適用于webkit內(nèi)核单匣，移動(dòng)端
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">一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類(lèi)型谈宛、弱類(lèi)型、基于原型的語(yǔ)言胎署，內(nèi)置支持類(lèi)型吆录。它的解釋器被稱為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);
一行 = 總寬度 / 單個(gè)字符寬度 = x 個(gè)/行
總字?jǐn)?shù) / x = 總行
但是中文恢筝、數(shù)字和英文的單個(gè)字符的寬度是不相等的，所以中英數(shù)混合下會(huì)不正確巨坊；默認(rèn)以第一個(gè)字符為參考
