css--两行显示省略号兼容火狐浏览器
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:;}
总结下来就是:固定的宽度,强制不换行,超出隐藏,显示省略号。四个属性
但是在火狐下不兼容:
兼容做法:
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom:; right:; 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。
css--两行显示省略号兼容火狐浏览器的更多相关文章
- css样式显示省略号
用css样式显示省略号,记 .xx{ display: block; width:200px;/*对宽度的定义,根据情况修改*/ overflow: hidden; white-space: n ...
- 超过两行显示省略号 -webkit-line-clamp、-webkit-box-orient vue打包后不起作用
为了实现两行显示缩略显示,但是本地是可以显示,打包后不起作用 word-break: break-all; text-overflow: ellipsis; display: -webkit-box; ...
- 兼容火狐浏览器的select下拉框样式
经常遇到这样的问题,在使用bootstrap框架的时候select选择框的样式在火狐浏览器上继承的是浏览器本身的样式,跟谷歌等其他的浏览器样式对比很难看,并且很难调整,但是! 好东西来了,现在能调成跟 ...
- Css 设置超过再两行显示省略号
大部分场景都是超过一行就显示... <template> <div class="other-product-item item-name" :title=&qu ...
- css溢出显示省略号
单行溢出省略号 .show-detail li .info-name { width:278px; display:inline-block; /*下面是重点*/ overflow: hidden; ...
- 纯css制作带三角(兼容所有浏览器)
如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...
- 如何使用CSS隐藏滚动条并且兼容大部分浏览器
隐藏滚动条,已经自己实测在浏览器Chrome, IE (6+), Firefox, Opera, Safari. 如下demo: Content 1 Content 1 Content 1 Conte ...
- CSS单行、多行文本溢出显示省略号(……)
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- css实现单行、多行文本溢出显示省略号(…)
一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:elli ...
随机推荐
- Java调用Python遇到的一系列问题与解决方案
首先,百度了几个方法 1.用jython里的一个jar包,jython.jar,里面封装了一个专门调用Python的类, 但是不知道为什么我用Java一调用就报错,因此放弃. 2.用runtime ...
- CMD和AMD的区别
CMD和AMD俩者之间的区别 AMD和CMD最大的区别是对依赖模块的执行时机处理不同 CMD和AMD都是CommonJS延伸而来的,CommonJS是随着node的出现而出现的,它是一个规范,用于定义 ...
- Unity 实现Log实时输出到屏幕或控制台上<二>
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/49884507 作者:car ...
- POJ 2081 Recaman's Sequence
Recaman's Sequence Time Limit: 3000ms Memory Limit: 60000KB This problem will be judged on PKU. Orig ...
- 【转载】GitHub详细教程
1 Git详细教程 1.1 Git简介 1.1.1 Git是何方神圣? Git是用C语言开发的分布版本控制系统.版本控制系统可以保留一个文件集合的历史记录,并能回滚文件集合到另一个状态(历 ...
- 警惕 InnoDB 和 MyISAM 创建 Hash 索引陷阱
MySql 最经常使用存储引擎 InnoDB 和 MyISAM 都不支持 Hash 索引,它们默认的索引都是 B-Tree.可是假设你在创建索引的时候定义其类型为 Hash,MySql 并不会报错,并 ...
- 今天听说了一个压缩解压整型的方式-group-varint
group varint https://github.com/facebook/folly/blob/master/folly/docs/GroupVarint.md 这个是facebook的实现 ...
- Win8.1应用开发之文件操作
在操作文件之前,先相应用的应用功能声明进行设定.用户通过C#(非UI)对win8.1上的文件进行訪问,仅仅能局限于图片,音乐,视频和文档四个目录. 而通过文件选取器则能訪问到整个系统的文件. (一)应 ...
- oracle_序列、索引、同义词
①序列 1.序列: 可供多个用户用来产生唯一数值的数据库对象 自己主动提供唯一的数值 共享对象 主要用于提供主键值 将序列值装入内存能够提高訪问效率 2.CREA ...
- Struts2 全局结果集
1.index,jsp <body> Result类型 <ol> <li><a href="user/user?type=1">返回 ...