JS获取文本在HTML中的真实长度

当控件内字符串大小 超过 控件字符显示区域 大小,就发生了truncation。

表现在Web应用中,就是HTML中的某个元素(控件)与元素value(字符)的大小不符,如下图所示。JS获取文本在HTML中的真实长度_第1张图片

根据[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消失了。

JS获取文本在HTML中的真实长度_第2张图片

本文测试源代码:






	
	



参考:

[1] http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393



你可能感兴趣的:(HTML,Javascript,CSS)