CSS超出文本用省略号显示 兼容firefox IE6 IE7

作者：袖梨 2022-06-25

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

代码如下 复制代码

css写省略号方法

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;

}

相关文章

精彩推荐