方法: 做一个空的html 标签 id为“ruler”,样式为“position:absolute;visibility: hidden; white-space: nowrap;z-index: -100”;
目的为了不影响页面,只是用来放你要测的文字的宽度,得到目标文字的内容,大小和字体.放到如下方法就行了:
String.prototype.visualLength = function(size,family) ??? { ??????? var ruler = $("#ruler").css({ ??????????? "font-size":size || "inherit", ??????????? "font-family":family || "inherit" ?????? }); ??????? ruler.text(this); ??????? return ruler.width(); ?? }
实例如下:
<!DOCTYPE html><html><head></head><style> ???#ruler { ???????position:absolute; ???????visibility: hidden; ???????white-space: nowrap; ???????z-index: -100; ???}</style><body><span id="ruler">test</span><span >tasdfasdfasdfest</span><script src="./jquery.min.js"></script><script> ???String.prototype.visualLength = function(size,family) ???{ ???????var ruler = $("#ruler").css({ ???????????"font-size":size || "inherit", ???????????"font-family":family || "inherit" ???????}); ???????ruler.text(this); ???????return ruler.width(); ???} ???var text = "tasdfasdfasdfest"; ???var len = text.visualLength("16px"); ???console.log(len)</script></body></html>
JS怎么计算html标签里文字的宽度
原文地址:http://www.cnblogs.com/flxy-1028/p/7813836.html