超出部分省略号, 兼容各种浏览器

超出的文字用省略号显示, 这是一个非常常见的需求,下面介绍两个方法,

按道理应该兼容所有浏览器,如果你发现某个浏览器不兼容,请回帖指出

方法一: 用css+xml文件简单实现,

优点是不使用js, 渲染速度快, 缺点是需要被添加省略号的文本只能有一行, 如果是多行的就需要使用其它的方法了

1 添加这个css

.ELLIPSIS { white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url(‘ellipsis.xml#ellipsis’); overflow:hidden; }

2 在和这个css文件同一个目录下放入这个xml文件,确保浏览器能够访问到, 这是firefox的hack

http://files.sparker5.com/sleeping/ellipsis.xml

3 对你的div添加ELLIPSIS这个class, 并给它一个width, 否则无效

方法二: 使用JQuery的ThreeDots插件, 具体细节可以看下面这个链接,可能需要翻墙

http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

或者你可以只看我下面的简单演示:

下载这个js,:

https://github.com/theproductguy/ThreeDots

然后导入:

<script src=”js/jquery-1.3.2.js” type=”text/javascript”></script>
<script src=”js/jquery.ThreeDots.js” type=”text/javascript”></script>

然后有下面这个html, 注意是div里面有一个span, 这个span有一个固定的class, 且要给这个div指明width:

<div style=”width:200px;” >
<span class=’ellipsis_text’>
abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg
</span>
</div>

然后使用如下js即可,max_rows是显示的行数:

$(document).ready(function () {
$(‘.ellipsis’).ThreeDots({ max_rows:3 });
});

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>