在一个元素中水平和垂直放置多少个等宽字符？

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

您无法计算出 div 可以容纳多少个字符，font-size:50px 没有定义每个字符的宽度（只需比较 "w" 和 "l", 这些字符不能有相同的宽度)。

尝试：Finding how many letter div fit 并且：http://itnow.blogspot.fr/2009/05/calculating-number-of-characters-that.html

此致，

Answer 2

我构建了一个执行此操作的 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>

在一个元素中水平和垂直放置多少个等宽字符？

How many monospace characters fit horizontally and vertically in an element?

html

javascript

css

jquery

monospace