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插件：

＆＃13;

$.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()));

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你无法通过这种方式计算div中适合的角色数量，font-size:50px没有定义每个角色的宽度（只需比较＆＃34; w＆＃34;和＆＃34; l＆＃34 ;，这些字符的宽度不能相同。）

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

此致

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

2 个答案: