思路
获取目标文本行高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