特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
CSS3中Text Effects属性一共有三个;text-shadow;text-overflow;word-wrap。其中text-shadow是CSS3中一个常用的属性,在《CSS3 text-show》中专门介绍了关于text-shadow的特性和使用方法。今天主要跟大家一起来学习CSS3中有关文本效果的另一个属性:text-overflow的使用。
大家在平时的网页制作中一定碰到过内容溢出的问题,比如说文章列表很长,而其宽度又受到限制,此时超出宽度的内容就会以(...)显示。以前实现这样的效果都是由后台程序截取一定的字符数在前台输出,另外一种方法就是使用js截取一定的字符数来实现。可是这两种方法都有其不足之处,比如说中文 和英文的计算字符宽度的问题,这个值不好计算,所以造成截取字符数不好控制,从而其通用性也差。那么今天我们来尝试一下CSS3中的text-overflow这个属性,看他如何实现这样的效果。
语法:
text-overflow : clip | ellipsis
取值说明:
1、clip:表示不显示省略标记(...),而只是简单的裁切,需要在一定的高度范围内配合overflow:hidden属性使用,如果不配合的话将无任何效果;
2、ellipsis:对象文本溢出时将显示省略标记(...),需要配合overflow:hidden;white-space:nowrap一起使用才会有效果。
兼容的浏览器
1、text-overflow: clip
2、text-overflow:ellipsis
text-overflow:clip所有浏览器都支持,但是text-overflow:ellipsis只有Firefox不支持,但有一些方法可以兼容解决这个问题,这个问题后面在来一起讨论,我们先从简单的开始。text-overflow:ellipsis应用在Opera浏览器下时,需要加上其前缀“-o-”。
下面我们先来看text-overflow中的clip的使用,别的先不说,大家一起来看下面的一段代码:
Html Code
<div class="demo text-overflow-clip"> test overflow clip effect test overflow clip effect text overflow clip effect </div>
CSS Code:
.demo { width: 100px; padding: 10px; border: 1px solid #ccc; } .text-overflow-clip { text-overflow: clip; }
效果:
从上面的效果图中我们可以明显看出text-overflow:clip;没有起到任何作用。文字没有任何截切,此时的div自动撑高以适应内容的高度。那么你可以在本地把text-overflow:clip删除在看看效果。你会发现有没有text-overflow:clip都是一样的,那需要怎么做呢?前面说过需要在一定的高度范围内配合overflow:hidden才能有效果。那么现在给这个div加上50px的高度和overflow:hidden属性:
.text-overflow-clip { text-overflow: clip; overflow: hidden; height: 50px; }
效果:
到这里我提议大家来个大胆的尝试,我们把上面代码中的text-overflow:clip注掉去
如需转载,烦请注明出处:https://www.w3cplus.com/content/css3-text-overflow
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!