BlogJava-子非鱼-文章分类-UIhttp://www.blogjava.net/hezhi/category/49016.htmlzh-cnThu, 07 Jul 2011 01:07:28 GMTThu, 07 Jul 2011 01:07:28 GMT60字符串截取【超过长度用...表示】http://www.blogjava.net/hezhi/articles/353632.html何智何智Mon, 04 Jul 2011 05:00:00 GMThttp://www.blogjava.net/hezhi/articles/353632.htmlhttp://www.blogjava.net/hezhi/comments/353632.htmlhttp://www.blogjava.net/hezhi/articles/353632.html#Feedback0http://www.blogjava.net/hezhi/comments/commentRss/353632.htmlhttp://www.blogjava.net/hezhi/services/trackbacks/353632.html使用JQuery实现超过长度用"..."省略


效果图

相关代码：
    
 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 2<html xmlns="http://www.w3.org/1999/xhtml"> 
 3<head> 
 4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 5<title>cookie</title> 
 6<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
 7<style> 
 8*{ margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif;} 
 9#best{ width:300px; height:200px; border:1px solid #ccc; margin:60px auto 0; line-height:1.6; font-size:14px; padding:10px 0 0 10px} 
10.blank{ font-size:18px; font-weight:bold; text-align:center; padding:20px} 
11</style> 
12<script type="text/javascript"> 
13jQuery.fn.limit=function(){ 
14    var self = $("div[limit]"); 
15    self.each(function(){ 
16        var objString = $(this).text(); 
17        var objLength = $(this).text().length; 
18        var num = $(this).attr("limit"); 
19        if(objLength > num){ 
20$(this).attr("title",objString); 
21            objString = $(this).text(objString.substring(0,num) + ""); 
22        } 
23    }) 
24} 
25$(function(){ 
26    $(document.body).limit(); 
27}) 
28</script> 
29</head> 
30<body> 
31    <div class="blank">请按F5刷新页面。。。。</div> 
32<div id="best"> 
33    <div limit="12">计算字串的长度长度长度长度</div> 
34    <div limit="10">这边有优化很公开这边</div> 
35    <div limit="12">这边有优化很公开长度长度很公开长度</div> 
36    <div limit="12">计算字长度长度</div> 
37    <div limit="10">这边有优化很边有优化很边有优化很边有优化很边有优化很</div> 
38</div> 
39</body> 
40</html> 


何智 2011-07-04 13:00 发表评论
]]>