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

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

我们经常遇到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 */    

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

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

在织梦Dedecms中,在列表页调用文章摘要的方法主要有: 1、[field:info /] 2、[field:description /] 3、[field:info function=cn_substr(@me,字符数)/] 4、[field:description function=cn_substr(@me,字符数)/] 方法一: 第一步 进数据库 找到表 dede_arch
在dedecms后台频道模型增加自定义字段,一般HTML文字编辑器能解决用户编辑问题,当然还包括纯单行或多行文本编辑。但发现dedecms会自动过滤掉某些敏感的字符,比如style样式,百度地图js调用问题。下面主要围绕着两个问题分享一下个人的经验。 HTML文字样式
本文通过修改织梦的移动手机版网站首页生成文件,解决了手机版网页无法自动更新的问题,而且只需改动一个字符。
CSS文件中的内容复制到其它文件时,应注意其中的相对链接位置是否有改变,否则就可能造成引用错误的问题。
网上的 代码运行框 代码算是比较多的了,随便搜索一下都一大堆的,但是没有找到一合适的,只有自己折腾一个简单的,注本文介绍的方法需要引用jquery库 首页在dedecms模板中引入jq
自己做网站 风格 的朋友都会自定义分页CSS样式,让分页样式和网页风格更加搭配。 整理了24款较经典的Page翻页分页css代码,方便大家做分页样式用。 织梦的分页样式修改比较麻烦,还需要修改include路径下的arc.listview.class.php和arc.archives.class.php这