使用text-overflow:ellipsis对溢出文本显示省略号
2014-06-07 17:59:40;  来源:;  作者:;  评论:0 点击:

使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数;二是有利于SEO。需要使用对对溢出文本显示省略号
使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数;二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。

通常的做法是这样的:
1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%;

其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6;

该方法支持Internet Explorer, Safari, Chrome ,firfox(新版)和 Opera。
还可以通过Jquery来实现类似的效果。

下载这个Jquery插件:jQuery ellipsis plugin

调用方法:
$(document).ready(function() {
    $('.ellipsis').ellipsis();
}
本文属转载文章,并不能保证完全正确,只供学习交流参考,版权归原作者所有。如果您认为有侵犯权利等不和法行为,请联系我们及时改正。http://www.zhuitaiyang.com/html/divcss/680.html

相关热词搜索:css ellipsis 溢出文本

上一篇:css content 如何自定义生成图标
下一篇:浏览器兼容之条件注释判断浏览器 if ie

收藏
回到顶部