单行文本
通用
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 = 总行
但是中文、数字和英文的单个字符的宽度是不相等的,所以中英数混合下会不正确;默认以第一个字符为参考
网友评论