CSS控制单行长度和字符个数的方法兼容各大浏览器

发布时间：2023-07-19 12:50:49 来源：互联网

.

快乐总和宽厚的人相伴，财富总与诚信的人相伴，智慧总与高尚的人相伴，魅力总与幽默的人相伴，健康总与豁达的人相伴。

我们经常遇到div宽度固定，单行字符有限，文字信息显示不全，影响阅读性和SEO优化，有没有让你抓狂呢？

下面就大家一个CSS控制单行长度和字符个数的方法兼容各大浏览器，隐藏多余字符，用“...”代替。

兼容性：

IE6测试兼容，IE7测试兼容，，IE8测试兼容，IE9测试兼容，Chrome测试兼容，FireFox测试兼容，Opera测试兼容。

CSS代码：

.mubanzhijia li{   /* 标签可以定义多个，不过请注意width属性，最好将width属性去掉 */    
    display:block;/*定义为块级；这个属相很重要，没有这个属性，很难实现单行宽度的效果*/    
    width:100%;/*要显示文字的宽度 提醒：可以将此属性剔除，然后就可以多标签的实现单行控制了*/    
    float:left;/*左对齐*/    
    overflow:hidden; /*超出的部分隐藏起来。*/    
    whitewhite-space:nowrap;/*不显示的地方用省略号...代替*/    
    text-overflow:ellipsis;/* 支持 IE */    
    -o-text-overflow: ellipsis; /* 支持 Opera */    
}