确定Javascript / jQuery中字符串的像素长度？

有什么方法可以确定jQuery / JavaScript中字符串的像素长度吗？

文本换行的跨度和使用jQuery的宽度（）

用于HTML Canvas的上下文具有用于检查字体大小的内置方法。此方法返回一个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>

基于vSync的答案，纯javascript方法可快速处理大量对象。这是小提琴：https : //jsfiddle.net/xeyq2d5r/8/

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

我收到了针对建议的第3种方法的良好测试，该方法使用了本机javascript vs 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毫秒。

Google Chrome：52
方法1花费了336.4399999999998毫秒。
方法2花费了2271.71毫秒。
方法3花费了333.30499999999984毫秒。

将其放在绝对放置的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>

首先复制文本的位置和样式，然后使用Jquery width（）函数。这将使测量准确。 例如，您具有使用以下选择器的css样式：

.style-head span
{
  //Some style set
}

您需要使用此脚本上方已包含的Jquery来执行此操作：

var measuringSpan = document.createElement("span");
measuringSpan.innerText = 'text to measure';
measuringSpan.style.display = 'none'; /*so you don't show that you are measuring*/
$('.style-head')[0].appendChild(measuringSpan);
var theWidthYouWant = $(measuringSpan).width();

不用说

想要的宽度

将保持像素长度。完成后，请删除创建的元素，否则，如果多次完成，您将获得多个元素。或添加一个ID来引用。

如果您使用Snap.svg，则可以使用以下功能：

var tPaper = Snap(300, 300);
var tLabelText = tPaper.text(100, 100, "label text");
var tWidth = tLabelText.getBBox().width;  // the width of the text in pixels.
tLabelText.attr({ x : 150 - (tWidth/2)});   // now it's centered in x