最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS超出文本用省略号显示 兼容firefox IE6 IE7
时间:2022-06-25 11:20:18 编辑:袖梨 来源:一聚教程网
CSS设置文本溢出不显示或显示省略号,只显示一定长度的文本,ie9下只需设置
代码如下 | 复制代码 |
div{white-space:nowrap;text-overflow: none;} |
或
代码如下 | 复制代码 |
div{white-space:nowrap;text-overflow: ellIPsis;} |
即可,在ie6,ie7需增加宽度设置才能生效
代码如下 | 复制代码 |
div{white-space:nowrap;text-overflow: ellipsis;*width:100px} |
实例1
代码如下 | 复制代码 |
|
实例2
代码如下 | 复制代码 |
ul { width: 300px; /*UL 的宽度*/ margin: 40px auto; padding: 12px 4px 12px 24px; border: 1px solid #D4D4D4; background: #F1F1F1; list-style:none; } li { margin: 12px 0; } /* IE ONLY */ li a { display: block; width: 220px; /* li 的宽度 这个控制显示多少字后显示...设的宽度大于字数时, 是不会显示...的 */ overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } /* firefox only */ li:not(p) { clear: both; } li:not(p) a { max-width: 170px; /*只有FF识别*/ float: left; } li:not(p):after { content: "..."; float: left; width: 25px; padding-left: 5px; color: #000; } |
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21