方法1；

首先在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中的標簽才能獲取長度。?　

?

方法2；

　　本文粘貼自http://www.cnblogs.com/mingmingruyuedlut/archive/2013/03/18/2966152.html，僅做學習參考使用。

　JQuery計算文本寬度的原理是利用html提供的<pre>標簽，向dom中動態添加<pre>標簽，標簽里的內容就是要測試長度的文本，獲取完長度之后再刪除剛才添加的<pre>標簽，從而可取到文本的大概長度了。

　　為什么要用標簽而不用其他標簽呢，那來看看<pre>標簽的特性吧：pre 元素可定義預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符;而文本也會呈現為等寬字體。 <pre>標簽的一個常見應用就是用來表示計算機的源代碼。需要注意的地方是，計算文本長度時文本里面最好不要有其他標簽。

以下是實現代碼：

function GetCurrentStrWidth(text, font) {var currentObj = $('<pre>').hide().appendTo(document.body);$(currentObj).html(text).css('font', font);var width = currentObj.width();currentObj.remove();return width;}

?

　　在此提供另外一種實戰中驗證過的方法： 完全可以用span 標簽去替代 pre 標簽。 只不過我們要十分注意：要傳遞正確的font信息（包括：font-family， font-size， font-weight）

計算文本長度的代碼方法：

function GetCurrentStrWidth(text, font) {var currentObj = $('<span>').hide().appendTo(document.body);$(currentObj).html(text).css('font', font);var width = currentObj.width();currentObj.remove();return width;}

?

調用方式：

var currentFont = "normal 13px Helvetica, Arial, sans-serif";var currentText = "111111111111";var currentWidth = GetCurrentStrWidth(currentText, currentFont);

?

轉載于:https://www.cnblogs.com/gaogan/p/6837819.html

總結

以上是生活随笔為你收集整理的jq计算文本宽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。