使用JavaScript计算文本宽度

这是我在没有例子的情况下一起鞭打的人.看起来我们都在同一页面上.

String.prototype.width = function(font) {
  var f = font || '12px arial',
      o = $('
')
            .text(this)
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

  o.remove();

  return w;
}

使用它很简单: "a string".width()

**添加white-space: nowrap了宽度大于窗口宽度的字符串可以计算.

jQuery的:

(function($) {

 $.textMetrics = function(el) {

  var h = 0, w = 0;

  var div = document.createElement('div');
  document.body.appendChild(div);
  $(div).css({
   position: 'absolute',
   left: -1000,
   top: -1000,
   display: 'none'
  });

  $(div).html($(el).html());
  var styles = ['font-size','font-style', 'font-weight', 'font-family','line-height', 'text-transform', 'letter-spacing'];
  $(styles).each(function() {
   var s = this.toString();
   $(div).css(s, $(el).css(s));
  });

  h = $(div).outerHeight();
  w = $(div).outerWidth();

  $(div).remove();

  var ret = {
   height: h,
   width: w
  };

  return ret;
 }

})(jQuery);

这对我有用......

// Handy JavaScript to measure the size taken to render the supplied text;
// you can supply additional style information too if you have it.

function measureText(pText, pFontSize, pStyle) {
    var lDiv = document.createElement('div');

    document.body.appendChild(lDiv);

    if (pStyle != null) {
        lDiv.style = pStyle;
    }
    lDiv.style.fontSize = "" + pFontSize + "px";
    lDiv.style.position = "absolute";
    lDiv.style.left = -1000;
    lDiv.style.top = -1000;

    lDiv.innerHTML = pText;

    var lResult = {
        width: lDiv.clientWidth,
        height: lDiv.clientHeight
    };

    document.body.removeChild(lDiv);
    lDiv = null;

    return lResult;
}

该ExtJS的JavaScript库有一个名为Ext.util.TextMetrics说,"为文本块精确测量像素,让您可以准确确定的高和宽,以像素为单位,文本的给定块将是"一个伟大的阶级.您既可以直接使用它,也可以查看其源代码以了解如何完成此操作.

http://docs.sencha.com/extjs/6.5.3/modern/Ext.util.TextMetrics.html

我喜欢你只做一个静态字符宽度图的"唯一想法"!它实际上适合我的目的.有时,出于性能原因或者您无法轻松访问DOM,您可能只需要一个快速hacky独立计算器校准到单个字体.所以这里有一个校准到Helvetica; 传递一个字符串和(可选)字体大小:

function measureText(str, fontSize = 10) {
  const widths = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.2796875,0.2765625,0.3546875,0.5546875,0.5546875,0.8890625,0.665625,0.190625,0.3328125,0.3328125,0.3890625,0.5828125,0.2765625,0.3328125,0.2765625,0.3015625,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.5546875,0.2765625,0.2765625,0.584375,0.5828125,0.584375,0.5546875,1.0140625,0.665625,0.665625,0.721875,0.721875,0.665625,0.609375,0.7765625,0.721875,0.2765625,0.5,0.665625,0.5546875,0.8328125,0.721875,0.7765625,0.665625,0.7765625,0.721875,0.665625,0.609375,0.721875,0.665625,0.94375,0.665625,0.665625,0.609375,0.2765625,0.3546875,0.2765625,0.4765625,0.5546875,0.3328125,0.5546875,0.5546875,0.5,0.5546875,0.5546875,0.2765625,0.5546875,0.5546875,0.221875,0.240625,0.5,0.221875,0.8328125,0.5546875,0.5546875,0.5546875,0.5546875,0.3328125,0.5,0.2765625,0.5546875,0.5,0.721875,0.5,0.5,0.5,0.3546875,0.259375,0.353125,0.5890625]
  const avg = 0.5279276315789471
  return str
    .split('')
    .map(c => c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg)
    .reduce((cur, acc) => acc + cur) * fontSize
}

那个巨大的丑陋数组是由字符代码索引的ASCII字符宽度.所以这只支持ASCII(否则它假设平均字符宽度).幸运的是,宽度基本上与字体大小成线性比例,所以它适用于任何字体大小.它显然缺乏对字距或连字或其他任何东西的认识.

为了"校准",我只是将每个字符渲染到svg上的charCode 126(强大的波浪号)并获得边界框并将其保存到此数组中; 这里有更多代码,解释和演示.

我为此写了一个小工具.也许这对某人有用.它没有jQuery.

https://github.com/schickling/calculate-size

用法:

var size = calculateSize("Hello world!", {
   font: 'Arial',
   fontSize: '12px'
});

console.log(size.width); // 65
console.log(size.height); // 14

小提琴:http://jsfiddle.net/PEvL8/

您可以使用画布,这样您就不必处理如此多的css属性:

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
ctx.font = "20pt Arial";  // This can be set programmaticly from the element's font-style if desired
var textWidth = ctx.measureText($("#myElement").text()).width;

Text

只要标记没有应用其他样式，它就应该起作用。offsetWidth将包括任何边框的宽度，水平填充，垂直滚动条宽度等。