文字超过宽度显示省略号（js版） 

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 4 
 5     <style type="text/css">
 6         * {
 7             font-size: 9pt;
 8         }
 9 
10         .container {
11             overflow: hidden;
12             background: #f1f1f1;
13             white-space: nowrap;
14         }
15 
16         .container .label {
17             overflow: hidden;
18             white-space: nowrap;
19         }
20     </style>
21 
22     <script type="text/javascript">
23         function getText(el) {
24             return el.innerText || el.textContent;
25         }
26 
27         function setText(el, text) {
28             if (el.innerText) {
29                 el.innerText = text;
30             } else if (el.textContent) {
31                 el.textContent = text;
32             }
33         }
34 
35         function updateEllipsis(container, label) {
36             if (container.scrollWidth > container.offsetWidth) {
37 
38                 var text = getText(label);
39                 //此处重要，利用container的实际宽度和显示宽度的比例计算出文字显示的个数，然后，截取出来并在末位加上...
40                 var len = container.offsetWidth / container.scrollWidth * text.length;
41                 setText(label, text.substring(0, Math.floor(len) - 1) + "...");
42                 label.title = text;
43             } else {
44                 if (label.title != "") {
45                     setText(label, label.title);
46                     label.title = "";
47                 }
48             }
49         }
50 
51         function init() {
52             var div1 = document.getElementById("div1");
53             var lab1 = document.getElementById("lab1");
54             updateEllipsis(div1, lab1);
55 
56         }
57     </script>
58 </head>
59 
60 <body onload="init();">
61 <div class="container" style="width:50%" id="div1">
62     <label class="label" id="lab1">自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号自动显示省略号</label>
63 </div>
64 
65 <br/>
66 <br/>
67 
68 <div class="container" style="width: 100px" id="div2">
69     <label class="label" id="lab2">hello,这是一个测试</label>
70 </div>
71 
72 <br/>
73 <br/>
74 
75 <div class="container" style="width: 100%" id="div3">
76     <label class="label" id="lab3">百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果百分百宽度的效果</label>
77 </div>
78 
79 </body>
80 </html>

 

posted @ 2015-11-13 00:58  aytsoft  阅读(1343)  评论(0)    收藏  举报