码迷,mamicode.com
首页 > Web开发 > 详细

css--两行显示省略号兼容火狐浏览器

时间:2017-11-15 21:40:57      阅读:5177      评论:0      收藏:0      [点我收藏+]

标签:pre   span   position   标签   背景   psi   hit   添加   vertica   

css--两行显示省略号兼容火狐浏览器

正常写法:

.ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.ellipse2{overflow:hidden; text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}

  总结下来就是:固定的宽度,强制不换行,超出隐藏,显示省略号。四个属性

但是在火狐下不兼容:

兼容做法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
  1. 将height设置为line-height的整数倍,防止超出的文字露出。
  2. 给p::after添加渐变背景可避免文字只显示一半。
  3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。

css--两行显示省略号兼容火狐浏览器

标签:pre   span   position   标签   背景   psi   hit   添加   vertica   

原文地址:http://www.cnblogs.com/intelwisd/p/7840407.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!