当文字过多时自动把文字变成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>