Question

有没有办法在jQuery / JavaScript中确定字符串的像素长度？

Answer 1

以范围换行文字并使用jquery width()

Answer 2

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

function getWidthOfText(txt, fontname, fontsize){
    if(getWidthOfText.c === undefined){
        getWidthOfText.c=document.createElement('canvas');
        getWidthOfText.ctx=getWidthOfText.c.getContext('2d');
    }
    getWidthOfText.ctx.font = fontsize + ' ' + fontname;
    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);
    }
    getWidthOfText.e.style.fontSize = fontsize;
    getWidthOfText.e.style.fontFamily = fontname;
    getWidthOfText.e.innerText = txt;
    return getWidthOfText.e.offsetWidth;
}

测试：

第一个解决方案（画布） - 测试，正常工作（以像素为单位返回）
第二个解决方案（DOM） - 测试，正常工作（以像素为单位返回）

请注意，由于实现差异，两者可能会返回略有不同的值。

性能测试：26788次调用平均超过100次迭代。测试于2014年末mac mini，1.4 GHz i5

Safari，版本10.1.1（12603.2.4）：

第一个解决方案：26788次调用为33.92毫秒
第二个解决方案：26788次调用为67.94毫秒

Google Chrome，版本60.0.3112.90：

第一个解决方案：26788次调用为99.1963毫秒
第二个解决方案：26788次调用的时间为307.4605毫秒

Answer 3

我不相信你只能做一个字符串，但是如果你把字符串放在<span>里面，并且具有正确的属性（size，font-weight等）;然后你应该能够使用jQuery来获得跨度的宽度。

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

Answer 4

将它放在一个绝对定位的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>

Answer 5

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

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

我收到了针对第3种方法的有利测试，该方法使用原生javascript与HTML Canvas

谷歌在选项1和3中非常具有竞争力，2轰炸。

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

边缘11 方法1花了4895.262839793865毫秒方法2花了6746.622271896686毫秒方法3花了1020.0315412885484毫秒。

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

Answer 6

首先复制文本的位置和样式，然后使用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();

不用说

theWidthYouWant

将保持像素长度。然后在完成后删除创建的元素，或者如果多次完成，您将获得几个元素。或者添加ID以引用。

Answer 7

也许对某些人有用

const getMaxPixelsOfStrings = ({ strings, styles = {} }) => {
  const spans = strings.map(str => {
    const span = document.createElement('span')
    span.append(str)
    Object.assign(span.style, {
      position: 'absolute',
      ...styles,
    })

    return span
  })

  document.querySelector('html').prepend(...spans)
  const maxPixels = Math.max(...spans.map(span => span.getBoundingClientRect().width))

  spans.forEach(span => span.remove())

  return maxPixels
}

使用

getMaxPixelsOfStrings({
            strings: ['One', 'Two', 'Three', 'Four', 'Five'],
            styles: {
              fontSize: '18px',
              letterSpacing: '1px',
            },
          })

Answer 8

如果您使用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

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

8 个答案: