JS获取文本在HTML中的真实长度
当控件内字符串大小 超过 控件字符显示区域 大小，就发生了truncation。
表现在Web应用中，就是HTML中的某个元素（控件）与元素value（字符）的大小不符，如下图所示。
根据[1]中给出的方法，可以得到文本的宽度。它是将文本构造成一个带hidden属性的div，然后获取其CSS属性来得到宽度的。
这里比较关键的就是获取浏览器默认font属性的方法。要注意不同浏览器中不同元素的默认font是不一样的，chrome下input元素的默认font-size是13.3333px，默认font-family是Arial。而div元素的默认font-size是16px，默认font-family是Times New Roman。可以用jQuery得到这些参数：
$("input").css("font-size");
$("input").css("font-family");为了测试[1]中的方法检测的准不准，在Chrome中将input元素的字符宽度调整为检测值152px后，input元素的truncation消失了。
本文测试源代码：
<html>
<head>
</head>
<body>
<div>
<input id="btn" type="button" value="hello html truncation issue" style="width:150px"></input>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
String.prototype.width = function(font) {
var f = font || "12px arial",
o = $("<div>" + this + "</div>")
.css({"position": "absolute", "float": "left", "white-space": "nowrap", "visibility": "hidden", "font": f})
.appendTo($("body")),
w = o.width();
o.remove();
return w;
}
$(document).ready(function(){
ele = document.getElementById("btn");
//get input element default font properties
ele_font_size = $("input").css("font-size");
ele_font_family = $("input").css("font-family");
console.log("hello html truncation issue".width( ele_font_size + " " + ele_font_family));
});
</script>
</body>
</html>参考：
[1] http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： C++对象数组的创建
- 下一篇： 获取字符串的像素长度
