首页 > 其他 > 详细

多行文本溢出隐藏处理,兼容ie,火狐

时间:2019-07-16 20:46:12      阅读:306      评论:0      收藏:0      [点我收藏+]

思路

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

  

 

多行文本溢出隐藏处理,兼容ie,火狐

原文:https://www.cnblogs.com/zsxblog/p/11197300.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!