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

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

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

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

兼容性:

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

CSS代码:

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

按上面的方法就可解决隐藏多余字符,用“...”代替了。

到此这篇关于CSS控制单行长度和字符个数的方法 兼容各大浏览器就介绍到这了。认识自己,降伏自己,改变自己,才能改变别人。更多相关CSS控制单行长度和字符个数的方法 兼容各大浏览器内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
织梦cms的整合各大搜索引擎实多功能搜索框的方法

dedecms的整合各大搜索引擎实多功能搜索框的方法

把织梦DedeCms的搜索框,改为整合各大搜索引擎的多功能搜索框!

织梦模板如何实现分享到各大网站的功能

CSS设置背景图片不显示的如何解决方法