波斯码BOSSMA Information Technology

Javascript处理标题长度超长截取加省略号

发布时间:2010年11月15日 / 分类:JavaScript / 7,522 次浏览 / 评论

网页中经常会用到文章标题列表,用于显示最新的、热门的或者只是某个具体栏目的信息等等。
一般栏目的宽度是有限的,而具体的文章标题长度是不确定的。所以我们一般要对文章标题截取长度。
有多种方法可以实现:
1、一般使用服务器端程序截取,如asp、php、c#等等
2、使用css,只对IE可以添加省略号
3、使用客户端脚本,如javascript

这篇文章介绍使用javascript来截取并添加省略号,兼容各种常用浏览器。引用了jquery类库。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
??? <title>Javascript截取文字测试</title>

??? <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

??? <script type="text/javascript">
??????? $(document).ready(function() {
??????????? $(".shortword").each(function() {
??????????????? var inText = $(this).text();
??????????????? if (inText.length > 15) {
??????????????????? $(this).text(inText.substr(0, 15) + "...")
??????????????? }
??????????? });
??????? });
??? </script>

</head>
<body>
??? <div>
??????? <ul>
??????????? <li><span class="shortword">asasas12121212asasas12121212asddd1212121212</span></li>
??????????? <li><span class="shortword">vssdfsasbffbfasasas12fbddd1212121212</span></li>
??????????? <li><span class="shortword">asasas12121212asasas12121212asddd1212121212</span></li>
??????????? <li><span class="shortword">vssdfsasbffbfasasas12fbddd1212121212</span></li>
??????????? <li><span class="shortword">asasas12121212asasas12121212asddd1212121212</span></li>
??????? </ul>
??? </div>
</body>
</html>

代码很简单,对所有应用了shortword样式的标签里边的内容都会进行截取。如果不符合自己的需求,可以修改下过滤方法:

$(“.shortword”)

如查找标签span,并且应用了样式shortword:

$(“span”).hasClass(“shortword”)

用到了jquery,如果想使用原生的javascript,请自己参照着修改一下。

jquery可以在它的官方网站下载

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯码,原文地址《Javascript处理标题长度超长截取加省略号

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

目前有1 条评论

  1. loongsky 沙发:

    很有用哈 谢谢了

发表评论