将文本包裹在一个跨度中并使用jquery width()

用于 HTML Canvases 的上下文具有用于检查字体大小的内置方法。此方法返回一个TextMetrics对象，该对象具有包含文本宽度的 width 属性。

function getWidthOfText(txt, fontname, fontsize){
    if(getWidthOfText.c === undefined){
        getWidthOfText.c=document.createElement('canvas');
        getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
    }
    var fontspec = fontsize + ' ' + fontname;
    if(getWidthOfText.ctx.font !== fontspec)
        getWidthOfText.ctx.font = fontspec;
    return getWidthOfText.ctx.measureText(txt).width;
}

或者，正如其他一些用户所建议的，您可以将其包装在一个span元素中：

function getWidthOfText(txt, fontname, fontsize){
    if(getWidthOfText.e === undefined){
        getWidthOfText.e = document.createElement('span');
        getWidthOfText.e.style.display = "none";
        document.body.appendChild(getWidthOfText.e);
    }
    if(getWidthOfText.e.style.fontSize !== fontsize)
        getWidthOfText.e.style.fontSize = fontsize;
    if(getWidthOfText.e.style.fontFamily !== fontname)
        getWidthOfText.e.style.fontFamily = fontname;
    getWidthOfText.e.innerText = txt;
    return getWidthOfText.e.offsetWidth;
}

编辑 2020：根据 Igor Okorokov 的建议添加了字体名称+大小缓存。

我不相信你可以只做一个字符串，但如果你把字符串放在<span>具有正确属性（大小、字体粗细等）的 a 中；然后您应该能够使用 jQuery 来获取跨度的宽度。

<span id='string_span' style='font-weight: bold; font-size: 12'>Here is my string</span>
<script>
  $('#string_span').width();
</script>

将其放在绝对定位的 div 中，然后使用 clientWidth 获取标签的显示宽度。您甚至可以将可见性设置为“隐藏”以隐藏 div：

<div id="text" style="position:absolute;visibility:hidden" >This is some text</div>
<input type="button" onclick="getWidth()" value="Go" />
<script type="text/javascript" >
    function getWidth() {
        var width = document.getElementById("text").clientWidth;
        alert(" Width :"+  width);
    }
</script>

基于 vSync 的回答，纯 javascript 方法对于大量对象来说是闪电般的。这是小提琴：https : //jsfiddle.net/xeyq2d5r/8/

[1]: https://jsfiddle.net/xeyq2d5r/8/ "JSFiddle"

我收到了对提议的第三种方法的有利测试，该方法使用本机 javascript 与 HTML Canvas

谷歌在选项 1 和 3、2 上的竞争非常激烈。

FireFox 48：
方法 1 耗时 938.895 毫秒。
方法 2 花费了 1536.355 毫秒。
方法 3 花费了 135.91499999999996 毫秒。

Edge 11 方法 1 耗时 4895.262839793865 毫秒。
方法 2 耗时 6746.622271896686 毫秒。
方法 3 耗时 1020.0315412885484 毫秒。

谷歌浏览器：52
方法 1 耗时 336.4399999999998 毫秒。
方法 2 耗时 2271.71 毫秒。
方法 3 耗时 333.30499999999984 毫秒。