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

发布时间：2010年11月15日 / 分类：JavaScript / 10,877 次浏览 / 评论

网页中经常会用到文章标题列表，用于显示最新的、热门的或者只是某个具体栏目的信息等等。
一般栏目的宽度是有限的，而具体的文章标题长度是不确定的。所以我们一般要对文章标题截取长度。
有多种方法可以实现：
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处理标题长度超长截取加省略号》

关键字: jquery 超长截取