1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>jQuery根据设置的字数截断过长标题并在末尾加上“…”</title>
6 <script type="text/javascript" src="../../jquery/jquery.js"></script>
7
8
9 </head>
10
11 <body>
12 <div limit="5">计算字串的长度长度长度长度</div>
13 <div limit="5">计算字长度长度</div>
14 <li limit="5">这边有优化很公开这边</li>
15 <li limit="5">这边有优化很公开这边这边有优化很公开这边</li>
16 <dt limit="5">这边有优化很公开长度长度很公开长度</dt>
17 <dd limit="5">这边有优化很边有优化很边有优化很边有优化很边有优化很</dd>
18
19 <script type="text/javascript">
20 function limit(){
21 //这里的div去掉的话，就可以运用li和其他元素上了，否则就只能div使用。
22 var self = $("[limit]");
23 self.each(function(){
24 var objString = $(this).text();
25 var objLength = $(this).text().length;
26 var num = $(this).attr("limit");
27 if(objLength > num){
28 //这里可以设置鼠标移动上去后显示标题全文的title属性，可去掉。
29 $(this).attr("title",objString);
30 objString = $(this).text(objString.substring(0,num) + "...");
31 }
32 })
33 }
34 limit();
35 </script>
36 </body>
37 </html>
