css 的规律摸索之路(三)文本省略问题
来源:互联网 发布:手机淘宝 手机天猫 编辑:程序博客网 时间:2024/06/18 02:31
前言
在css的使用中,我们经常性的需要对溢出文本进行处理,在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了。
在css中有个属性叫做text-overflow:ellipsis;
配合其他一些属性可以实现IE,chrome,safria浏览器下文字溢出点点点省略号显示,在加上opera浏览器的私有属性-o-text-overflow:ellipsis;
就目前而言,可以基本实现Firefox浏览器以外的所有主流浏览器的文字溢出点点点省略号显示。
浏览器支持:
通过浏览器支持表我们可以看出,Firefox对text-overflow严重落后于其它浏览器,IE从数年前的6.0版本就支持了这个属性,而Firefox在IE6推出之后的漫长岁月里,Firefox经过了4次大版本号升级都没有提供支持,直到Firefox 7.
到目前为止,Firefox之外的浏览器都支持text-overflow css了,所以开发者只需要针对Firefox 3.x - 6.x做特别处理。
除Firefox外的单行文本溢出解决:
对于单行文本溢出我们使用一句话,放在你需要解决溢出问题的元素上:
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;
这句话可以解决大部分的浏览器单行文本溢出。
针对Firefox老版本,做省略号效果
针对Firefox,做省略号效果,目前主要有3种方案,分别是:
- css binding xml
- JavaScript截取(此处不做说明,因为能用css为何要用js)
- 省略号遮盖。
css binding xml
这是老外提供的一种方法,使用Firefox的私有属性调用一个XML文件(ellipsis.xml),可以使Firefox火狐浏览器下文字溢出后以省略号的形式显示。
ellipsis.xml的内容如下:
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="ellipsis"> <content> <xul:description crop="end" xbl:inherits="value=xbl:text"> <children/> </xul:description> </content> </binding></bindings>
把ellipsis.xml另存为到本地你的css文件存放的地方,然后就是调用:
-moz-binding:url(‘ellipsis.xml#ellipsis’);
跟css样式写法一致,再结合上面的css样式,就可以实现所有主流浏览器下的单行文字溢出用省略号表示了。css表示如下:
overflow: hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;-moz-binding:url('ellipsis.xml#ellipsis');
注意:此XML文件貌似不支持向上路径的访问,也不支持绝对路径的访问。也就是说此XML文件需要放在调用文件(css文件,或HTML文件)的同目录下或下一级目录下,不能向上访问。所以为了麻烦直接存到调用文件的统一级目录就行了
省略号遮盖
这种方式有点老的掉牙,因为自2013年以后所有浏览器都已经支持text-overflow:ellipsis;
方法
所以这里只是附上代码大家看看得了
<h3>省略号遮盖法</h3><div class="text_overflow_margin" > <div class="margin_con" >这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。</div> <div class="margin_ellipsis" >…</div></div><style> .text_overflow_margin{ width: 24em; height: 20px; overflow:hidden; zoom:1; background: #333; } .text_overflow_margin .margin_con{ height: 20px; margin-right: 1em; background: #f00; } .text_overflow_margin .margin_ellipsis{ width: 1em; height: 20px; float:right; margin-top: -20px; }</style>
多行文本溢出省略号
不兼容的WebKit内核新版属性
有时候我们需要在多行文本后面添加一个省略号,怎么样添加呢?
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
说明:
1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。
2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
适用范围:因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;所以其兼容性不太好
<p class="article_synopsis"> 我们时常对城市中的建筑过目即忘,甚至你不会觉得城市与城市之间有什么不同。因为这些钢筋混泥土建筑的空间里,没有与我们内心与之呼应的东西。这些东西是一个民族几千年里凝练下来的一种审美,流淌在我们的血液里。</p><style> .article_synopsis{ display: -webkit-box; text-overflow: ellipsis; text-indent: 2em; overflow : hidden; -webkit-line-clamp: 5; -webkit-box-orient: vertical; height: 90px; width: 170px; font-size: 12px; }</style>
兼容的写法
我们为了兼容考虑可以使用伪类来达到相同的效果
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}p::after{content: "..."; position: absolute; bottom: 0; right: 0; }
完整代码实现:
<p class="synopsis"> 我们时常对城市中的建筑过目即忘,甚至你不会觉得城市与城市之间有什么不同。因为这些钢筋混泥土建筑的空间里,没有与我们内心与之呼应的东西。这些东西是一个民族几千年里凝练下来的一种审美,流淌在我们的血液里。</p><style> .synopsis{ position: relative; line-height: 20px; overflow: hidden; height: 80px; width: 170px; font-size: 12px; } .synopsis::after{ content: "..."; position: absolute; bottom: 0; right: 0; line-height: 20px; background: #fff; width: 14px; }</style>
说明:
1. 设置line-height属性,防止超出的文字露出部分。
2. 给p::after添加定位、颜色、行高及宽度可避免文字只显示一半。
3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:…);兼容ie8需要将::after替换成:after。
适用范围:该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
关于JavaScript 方案可以去看看Clamp.js和jQuery插件-jQuery.dotdotdot
小结:
至此我们常用的css溢出变为省略号的方法基本结束了
提示:后面还有精彩敬请期待,请大家关注我的CSDN博文:侬姝沁儿,或者我的简书专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。
- css 的规律摸索之路(三)文本省略问题
- css 的规律摸索之路(一)css之三角形的规律及变化
- css 的规律摸索之路(二)css之居中问题(垂直居中与水平居中)
- CSS文本超过省略
- css省略溢出文本
- CSS学习笔记:溢出文本省略(text-overflow)
- css 文本溢出时显示省略标记(...)
- td中的文本省略问题
- css强制文本在一行,超出省略
- CSS隐藏文本和省略处理
- 黑科技:纯CSS定制文本省略
- 多态的摸索之路( 甲 )
- 安卓新手的摸索之路
- 纯css文本溢出省略(需定义宽度,兼容IE6、IE7、Firefox2.0、Opera9.0)
- 纯css文本溢出省略(兼容IE6+、FF2.0+、Opera9.26+、sefari)
- CSS细节之文本换行三属性
- 文本溢出显示省略标记'...'的bug
- 页面单行文本的省略显示
- Android 设计模式之MVC模式
- 事务
- 深度学习入门篇(一) Lenet深度神经网络
- Linux下的tar压缩解压缩命令详解
- 深入理解 JavaScript 异步系列(2)—— jquery的解决方案
- css 的规律摸索之路(三)文本省略问题
- linux 连接WIFI
- 动态链接库dlopen的函数的使用
- MyEclipse中集成和使用Maven的方法
- Mysql数据库定时备份
- Source insight护眼设置
- JPA常用注解
- Linux常用命令
- java程序中注册系统级热键 jintellitype