主页 > 网站建设 > 建站知识 > CSS控制单行长度和字符个数的方法 兼容各大浏览

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

POST TIME:2020-04-01 18:44

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

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

兼容性:

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

CSS代码:


  1. .mubanzhijiali{/*标签可以定义多个,不过请注意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*/
  9. }

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



收缩
  • 微信客服
  • 微信二维码
  • 电话咨询

  • 400-1100-266