兼容所有浏览器的省略号--纯CSS策略
代码:
div a{
display:block; /* 必须 */
Width:310px; /* 必须 */
white-space:nowrap; /* 必须 */
overflow:hidden; /* 必须 */
float:left; /* 必须 */
text-overflow:ellipsis; /* for IE */
-o-text-overflow: ellipsis; /* for Opera safari chrome*/
}
/* for Firefox */
div:after{
content:"
";padding-left:3px;
font-size:12px;
}
</style>
<body>
<div>
<a href="ddd">我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志</a>
</div>
</body>
示例:
转载于:https://www.cnblogs.com/fdszlzl/archive/2009/06/01/1493970.html
兼容所有浏览器的省略号--纯CSS策略相关推荐
- 兼容IE各版本的纯CSS二级下拉菜单
这是一个标准的CSS下拉菜单制作教程,有针对目前流行的IE6/IE7/IE8不同版本的CSS代码,因此可以在IE之间完全兼容,不过其它的浏览器像火狐/GG浏览器之类的没有测试,如果兼容IE8的话,那么 ...
- 浏览器视窗内纯CSS的层固定位置及发现的一个针对IE6的怪癖问题
固定定位来源:http://www.wowbox.com.tw/blog/uploads/200705/02_022326_3.htm 详细HTML如下: <?xml version=" ...
- CSS文本超过两行用省略号代替(兼容所有浏览器)
CSS文本超过两行用省略号代替 方法一:常规写法(只兼容Chrome内核浏览器) 方法二:可以兼容所有浏览器的方式( js + CSS实现 ) 方法三:可以兼容所有浏览器的方式( 纯CSS实现 ) 方 ...
- html 文本溢出 兼容,CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）
前言 多行文本超出高度限制出现省略号 , 移动端多为webkit内核的 , 有扩展属性-webkit-line-clamp , 但并不是CSS规范中的属性 , PC端往往要借助js去实现这一效果,但麻 ...
- 纯css实现文本溢出省略号，兼容（火狐，IE9，chrome）
很多业务需求下会出现文本溢出无法显示的情况,设置为显示省略号又不兼容,兼容性只能用js实现,今天介绍一种可以直接用css实现的方法.该方法兼容各大主流浏览器,除了诡异的IE低版本 实现原理:盒模型浮动 ...
- 纯CSS实现iframe高度自适应，完美兼容各种浏览器，同域异域
最近做项目需要引用外部页面,在网上找的许多关于iframe高度自适应的文章,有的只能同域访问,有的可以实现异域,但是需要异域是可编辑的.对于我这种情况都不适用.而且,这些方法都需要用js. 后来,我发 ...
- html语言对奇偶数行设置颜色,纯CSS实现奇偶数行颜色交替(兼容主流浏览器)
做一张li二倍高的背景图,然后,上半部分PS成奇数行颜色,下半部分PS成偶数行颜色,然后将这张图定义给ul任其平铺.这样一来,纵使有万千行,它也会轻而易举的交替颜色... 本文DEMO背景图(1*50 ...
- 兼容FF,IE的纯CSS下拉菜单
代码简介:作者的CSS水平不错啊,值得我们学习,少了JS,就是好看多. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...
- text-overflow:ellipsis溢出显示省略号兼容所有浏览器的解决办法
我想大家在做项目的时候都遇到这样的需求:对于一些列表文本过长溢出显示省略号,我们可以text-overflow:ellipsis很简单地达到效果,很遗憾不能兼容火狐浏览器. text-overflow ...
最新文章
- java之final
- A TLS packet with unexpected length was received 解决方法
- 30段极简Python代码：这些小技巧你都Get了么？
- 微信小程序时间转换成时间戳、获取当前时间戳、获取当前时间、时间戳加减
- 在 SAP Analytics Cloud 上开发和使用 Queries
- int数组初始化_Java数组
- Magento教程 15：Magento 批次修改产品资料
- 写给mybatis小白的入门指南
- 【C语言】矩阵乘法（二维数组）
- r-cnn学习（六）：RPN及AnchorTargetLayer学习
- cast函数 oracle 日期_从 Oracle 到 PostgreSQL ，某保险公司迁移实践
- 海南大学信号与系统838考研经验（3）
- 适合有基础的Java实战项目——坦克大战 练手实战项目
- 技术书籍也香艳-时隔12年《Head First设计模式》第二版要来了
- ECCV 2020 五项大奖出炉！普林斯顿邓嘉获最佳论文奖
- 一个数如果恰好等于它的因子之和，这个数就称为“完数”。例如6=1＋2＋3.编程找出1000以内的所有完数。
- React React-Redux Redux
- Spring boot带来的信息泄露
- 备选统驭科目(Alternative Reconciliation Accounts)配置及实操演示
- 利用 freemarker 模板生成 word 小结