按客户要求,需要在仪表板中组件标题栏上动态显示字串,当字串宽超出标题栏时,显示 ... 。这个必须是动态的,我写了一下,效果如下: 代码如下: <html> <head> <mce:script type="text/javascript"><!-- //计算指定字体和字号的字符串宽度 function calTextWidth(fontSize, fontname, text) { var span = document.createElement("span"); span.style.fontSize = fontSize; span.style.fontFamily = fontname; var width; width = span.offsetWidth; span.style.visibility = "hidden"; document.body.appendChild(span); if (typeof span.textContent != "undefined") span.textContent = text; else span.innerText = text; width = span.offsetWidth - width; span.parentNode.removeChild(span); return width; } //计算指定div显示指定字串时,正确的忽略显示方式。 function calShowText(div,str) { var div_width = div.offsetWidth; var fontsize = div.style.fontSize; var fontname = div.style.fontfamily; var manyString = "..."; //省略符号 var space_width = 10; //预留的宽度 var tail_width = calTextWidth(fontsize,fontname,manyString) + space_width; var counter = 0; var sTemp = ""; for(var i=0; i<str.length;i++) { sTemp += str.substring(i,i+1); if (calTextWidth(fontsize,fontname,sTemp) > div_width - tail_width) break; } if (i == str.length) return sTemp; else return sTemp + manyString; } // --></mce:script> </head> <body> <div id="content" style="background:red;width:150px;white-space:nowrap;font-family:宋体;font-size:12;overflow: hidden">just a test </div> <a href="#" mce_href="#" οnclick="javascrpt:content.innerHTML = calShowText(content,txtInput.value);">set text</a> <input type="text" id="txtInput" size=100/> </body> </html>