javascript - 一个元素中水平和垂直有多少个等宽字符？

Question

我试图找出一个元素中有多少个等宽字符（例如div），知道大小和font-size.

例如，我预计结果是：

{
   x: Math.floor(divWidth / fontSize)
 , y: Math.floor(divHeight / lineHeight)
}

但似乎它们是不对的：对于字体大小50px和width: 100px，预期的答案是2，但它是3：

div {
    font-family: monospace;
    background: black;
    color: lightgreen;
    font-weight: bold;
    width: 100px;
    height: 100px;
    font-size: 50px;
}

<div>
123
123
</div>

对于上面的例子，答案应该是：

{
   x: 3 // 3 chars horizontally
 , y: 1 // 1 char vertically
}

如何自动计算这些值？

var $div = $("div");
var divSize = {
    w: $div.width()
  , h: $div.height()
};
var fontSize = parseInt($div.css("font-size"));

Answer 1

我构建了一个 jQuery 插件来执行此操作：

$.fn.textSize = function () {
    var $self = this;
    function getCharWidth() {
        var canvas = getCharWidth.canvas || (getCharWidth.canvas = $("<canvas>")[0])
          , context = canvas.getContext("2d")
          ;
        
        context.font = [$self.css('font-size'), $self.css('font-family')].join(' ');
        var metrics = context.measureText("3");
        return metrics.width;
    };

    var lineHeight = parseFloat(getComputedStyle($self[0]).lineHeight);
    return {
        x: Math.floor($self.width() / getCharWidth())
      , y: Math.floor($self.height() / lineHeight)
    };
};

alert(JSON.stringify($("div").textSize()));

div {
    font-family: monospace;
    background: black;
    color: lightgreen;
    font-weight: bold;
    width: 100px;
    height: 100px;
    font-size: 50px;
    line-height: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>

Answer 2

你不能用这种方式计算有多少个字符可以放入 div，font-size:50px没有定义每个字符的宽度（只是比较“w”和“l”，这些字符不能有相同的宽度）。

尝试：找到多少字母 div 适合 并且：http: //itnow.blogspot.fr/2009/05/calculating-number-of-characters-that.html

问候，