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

最新推荐文章于 2024-05-13 05:07:48 发布

ybdesire

最新推荐文章于 2024-05-13 05:07:48 发布

阅读量2.6w

点赞数 1

分类专栏： HTML Javascript CSS

本文链接：https://blog.csdn.net/ybdesire/article/details/50018747

版权

Javascript 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

当控件内字符串大小超过控件字符显示区域大小，就发生了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