计算页面某段文字的长度的函数

最新推荐文章于 2022-09-14 10:34:00 发布

HeLiang7

最新推荐文章于 2022-09-14 10:34:00 发布

阅读量965

点赞数

分类专栏： javascript WEB 文章标签：文字长度

本文链接：https://blog.csdn.net/HeLiang7/article/details/18660907

版权

WEB 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

核心函数，注意是基于JQuery。这个办法计算的值，无法大于页面宽度。

		var stringWidth = function(fontSize, content) {
			var $span = $('<span></span>').hide().css('font-size', fontSize).text(content);
			var w = $span.appendTo('body').width();
			$span.remove();
			return w;
		};

一个页面的完整例子，请打开控制台看结果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
	<script>
		var stringWidth = function(fontSize, content) {
			var $span = $('<span></span>').hide().css('font-size', fontSize).text(content);
			var w = $span.appendTo('body').width();
			$span.remove();
			return w;
		};

		$(function(){
			if(console && console.log){
				console.log(stringWidth('12px', 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia, quos repellat maiores doloribus laborum natus quo laboriosam illum hic deleniti. Laborum, quisquam eaque sapiente quasi minus eveniet officiis vel perferendis!'));
			}
		});
	</script>
	<style type="text/css">
	</style>
</head>
<body>

</body>
</html>