文字拉开缩回小练习

当文字过多时自动把文字变成XXXXXX...
点击后显示全部文字，再次点击是缩回
 1 <head runat="server">
 2     <script src="jquery-1.7.2.min.js"></script>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <script src="jquery.color.js"></script>
 5     <title></title>
 6     <style>
 7         .div_1 {
 8             position: relative;
 9             width: 300px;
10             height: 30px;
11             background-color: yellow;
12             word-wrap: break-word;
13             word-break: break-all;
14             line-height: 30px;
15             overflow: hidden;
16             cursor: pointer;
17             margin-top: 20px;
18         }
19 
20         .div_2 {
21             position: relative;
22             width: 300px;
23             background-color: red;
24             word-wrap: break-word;
25             word-break: break-all;
26             line-height: 30px;
27         }
28     </style>
29 </head>
30 <body>
31     <form id="form1" runat="server">
32         <div class="div_1">
33             <div class="div_2">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
34         </div>
35 
36 
37         <div class="div_1">
38             <div class="div_2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
39         </div>
40 
41 
42         <div class="div_1">
43             <div class="div_2">cccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</div>
44         </div>
45 
46 
47         <div class="div_1">
48             <div class="div_2">ddddddddddd</div>
49         </div>
50 
51 
52         <div class="div_1">
53             <div class="div_2">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
54         </div>
55     </form>
56 </body>
57 </html>
58 <script>
59     var MaxLength = 20;
60     var tt = new Array();
61     for (var i = 0; i < $(".div_1").length; i++) {
62         if ($(".div_1").eq(i).height() < $(".div_1").eq(i).find(".div_2").height()) {
63             tt[i] = $(".div_1").eq(i).find(".div_2").text();
64             $(".div_1").eq(i).find(".div_2").text($(".div_1").eq(i).find(".div_2").text().substr(0, MaxLength) + "...");
65         }
66     }
67     $(".div_1").click(function () {
68         if ($(this).find(".div_2").text().length == MaxLength + 3) {//+3是因为截取后拼接了"..."三个点
69             $(this).find(".div_2").text(tt[$(".div_1").index($(this)[0])]);//取索引，[0]很重要
70             $(this).animate({ height: $(this).find(".div_2").height() }, 500);
71             $(this).find(".div_2").animate({ backgroundColor: "yellow" }, 500);
72         }
73         else if ($(this).find(".div_2").text().length > MaxLength + 3) {
74             $(this).animate({ height: "30px" }, 500);
75             $(this).find(".div_2").animate({ backgroundColor: "red" }, 500, function () {
76                 $(this).text($(this).text().substr(0, MaxLength) + "...");
77             });
78         }
79     });
80 </script>