JQuery 計算文本的總寬度（Width）

　　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);

 

。。。。。。