javascript - 如何计算适合div的等宽字体的字符数

我有这样的代码：

div {
    font-family: monospace;
    font-size: 12px;
    line-height: 14px;
}

$(function() {
    var div = $('div');
    var space = $('<span>&nbsp;</span>').appendTo(div);
    var num_chars = div.width() / space.width();
    var chars = '';
    for (var i=0; i<num_chars; ++i) {
        chars += 'd';
    }
    div.html(chars);
    space.remove();
});

但是字符数是填充div宽度的非常小的方法。有谁知道如何计算填充div一行的字符数？

最佳答案

这里有一个通用方法，它使用getClientRects()来确定内容何时溢出到新行。normalize()似乎需要getClientRects()才能正常工作。
我使用word-wrap: break-word来避免需要多个跨度。
您还可以使用我使用的for方法来简化Array().join()循环：

var space = $('<span>').appendTo('div'),
    num_chars;

do {
  space.append('M');
  space[0].normalize();
} while (space[0].getClientRects().length === 1);

num_chars = space.text().length;
$('div').html(Array(num_chars).join('d'));

div {
  font-family: monospace;
  font-size: 12px;
  width: 400px;
  border: 1px solid black;
}

span {
  word-wrap: break-word;
}

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