jquery 获取文字宽度与显示长度的例子

发布时间:2020-03-20编辑:脚本学堂
使用jquery与js获取文字的宽度,以及显示文字长度,分享几个小例子,有需要的朋友参考学习下。

首先,在body标签最后添加一个子标签:
 

复制代码 代码示例:
<span id="ruler">test</span>

然后,添加css代码:
 

复制代码 代码示例:
#ruler {
visibility: hidden;
white-space: nowrap;
font-size: 24px;
}

接着直接在String的原型中添加获取文字宽度的函数,在js代码中加入:
 

复制代码 代码示例:
String.prototype.visualLength = function()
{
var ruler = $("#ruler");
ruler.text(this);
return ruler[0].offsetWidth;
}

最后,在需要获取文字宽度的地方调用即可。

例如:
var text = "test";
var len = text.visualLength();

思路解析:
添加一个隐藏的标签,每次对该标签赋值后,通过获取该标签的长度来获取文字宽度。

注意:只有已经被添加到DOM中的标签才能获取长度。