思路
获取目标文本行高line-height,内容高度offsetHeight
假设 2 行文本溢出隐藏
内容高度除以行高大于2,则加上溢出隐藏的css类名
css代码
.text{
line-height:14px;
overflow:hidden;
}
.texter{
height:28px;
}
.texter:after{
content: ‘ ... ‘,
position:absolute;
bottom:0;
right:0;
background: -webkit-linear-gradient(left, #fff 50%); /* Safari 5.1-6.0 */
background: -o-linear-gradient(left, #fff 50%); /* Opera 11.1-12.0 */
background: -moz-linear-gradient(left, #fff 50%); /* Firefox 3.6-15 */
background: linear-gradient(left, #fff 50%); /* 标准语法 */
}
JS代码(vue)
let lineHeight = window.getComputedStyle(this.$refs.text).line-height
let oHeight = this.$refs.text.style.offsetHeight
if((oHeight/lineHeight)>2){
this.$refs.text.className = ‘text texter‘
}
原文:https://www.cnblogs.com/zsxblog/p/11197300.html