css多行省略

时间:2024-01-05 18:15:02

单行省略就不用说了,用css实现非常简单,兼容性还非常好。但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 。。。 代替,且不说好不好,万一哪天PM说要改成3行,UI说这个字体改大一点,又得去算一遍,可谓是苦不堪言。

好在有css3,css3提供了实现完美的多行省略方法,本文已scss为例

@mixin ellipsis($lineCount: 2) {
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $lineCount;
line-clamp: $lineCount;
-webkit-box-orient: vertical;
}

咋们想要几行省略的时候直接调用这个方法,传入行数,就能完美实现,不需要去计算。

但是,但是,,兼容性一直是个问题啊,可以看出,必须要加上前缀才能生效,就不说IE了,就连低端的Android手机都不兼容,真是头疼。。。

难道就没有别的办法了吗?

no!!css 是博大精深的,尤其是预编译css工具更强大,例如下面就是 scss的写法,其他less,sass类似

@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 2, $bgColor: white) {
overflow: hidden;
position: relative;
line-height: $lineHeight;
max-height: $lineHeight * $lineCount;
text-align: justify;
&:before {
content: '...';
width: 1em;
position: absolute;
right:;
bottom:;
background-color: $bgColor;
}
&:after {
content: '';
position: absolute;
right:;
width: 1em;
height: 1em;
margin-top: 0.5em;
background: $bgColor;
}
}

简单解释一下,

lineHeight 就是一行的高度,便于计算高度
lineCount 需要几行省略
bgColor 背景颜色

就是巧妙的运用了高度的原理,在没有达到高度的时候显示的是 after,当超出高度的时候显示before 。

补充js实现多行文本溢出

const p = document.querySelector('p')
let words = p.innerHTML.split(/(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g)
while (p.scrollHeight > p.clientHeight) {
words.pop()
p.innerHTML = words.join('') + '...'
}
<p>这是一段测试文字,this is some test text,测试文字,测试文字测 </p>

使用split + 正则表达式将单词与单个文字切割出来存入words

加上 '...'

判断scrollHeight与clientHeight,超出的话就从words中pop一个出来