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%);
}

将height设置为line-height的整数倍，防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。

转载于:https://www.cnblogs.com/intelwisd/p/7840407.html

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

text-overflow:ellipsis溢出显示省略号兼容所有浏览器的解决办法
我想大家在做项目的时候都遇到这样的需求:对于一些列表文本过长溢出显示省略号,我们可以text-overflow:ellipsis很简单地达到效果,很遗憾不能兼容火狐浏览器. text-overflow ...
css实现单行、多行超出显示省略号兼容火狐
css 单行,超出部分显示省略号 p{overflow:hidden;//超出部分隐藏text-overflow:ellipsis;//超出部分显示省略号white-space:nowarp;//不允 ...
css文本超过多行显示省略号兼容所有浏览器
在网上找到的都是用js判断的(https://www.cnblogs.com/zoumiaomiao/p/4952625.html https://www.cnblogs.com/ChanWunsam ...
css超出两行省略号没效果,Css 设置超过再两行显示省略号
大部分场景都是超过一行就显示... {{item.name}} {{item.name}} export default { return { item: {name:'this is a very ...
CSS 文本超出两行显示省略号
// 文本超出两行显示省略号注:如果设置了弹性布局 display:flex; 那么下面的的css设置将不起作用div {width: 300px; overflow:hidden;text-ov ...
滚动条兼容火狐浏览器
滚动条兼容火狐浏览器滚动条距离顶部距离 let ele=document.getElementById("demo") console.log(ele.scrollTop) 滚定 ...
css文本显示省略号
css文本显示省略号 // 单行显示省略号 .text-ellipsis {max-width: 100%;white-space: nowrap;overflow: hidden;text-over ...
css换行显示省略号
css换行显示省略号 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; /* 可以显示的行数,超出部分用...表示*/ -web ...
css省略号在火狐浏览器下不兼容的问题
最近涨了一个关于css省略号的知识写一下总结,方便以后回忆起来一个很基本的知识点, 导航栏超出限制字数后显示省略号通用限制写法 /* 显示一行,省略号 */white-space: nowrap ...

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

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

最新文章

热门文章