用 css 或 js 实现多行文本溢出省略效果
CSS版:
如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性
.test{
width: 100px;
height: 46px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2
}
js版:
如何用 css 或 js 实现多行文本溢出省略效果,考虑兼容性
.test{
width: 100px;
overflow: hidden;
position: relative;
line-height: 20px;
max-height: 40px;
}
const p = document.querySelector('#test')
let words = p.innerHTML.split(/(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g)
while (p.scrollHeight > p.clientHeight) {
words.pop()
p.innerHTML = words.join('') + '...'
}