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

Question

我有这样的代码：

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的一行的字符数？

Answer 1

这是一种通用方法，它使用getClientRects()来确定内容何时溢出到新行。 <{1}}似乎需要normalize()才能正常运作。

我使用getClientRects()来避免需要多个跨度。

您还可以使用我使用的word-wrap: break-word方法简化for循环：

＆＃13;

＆＃13;

Array().join()

＆＃13;

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'));

＆＃13;

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

span {
  word-wrap: break-word;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

如何计算CPL

使用JS获取div的宽度，其中75将变为变量以及fontsize和容器宽度。但这就是公式。

• 75 =所需的CPL
• 16 =字体大小
• 2.28 = Char常量 - 在你的情况下，这将是monospace字体的char const
• 526.3158 =容器的PX。

创建一个函数来操作此公式以获得答案。

Read more >

Answer 3

简单方法的问题在于尽管字符的前进宽度在等宽字体中是恒定的，但它通常不是整数个像素。它在字体文件中以更细粒度的方式定义，通常使用的字体大小是字体大小的千分之一。浏览器以不同的方式处理这个问题。问题中的代码在不同的浏览器中表现不同。

为了获得一致的结果，请设置内联元素，将其插入div元素内，并向其添加字符，直到其宽度超过容器的宽度;然后删除最后一个字符。这在朴素的JavaScript中非常简单：

＆＃13;

＆＃13;

var foo = document.getElementById('foo');
var len = foo.offsetWidth;
var span = document.createElement('span');
foo.appendChild(span);
span.innerHTML = '';
for(var i = 0; span.offsetWidth <= len; i++) 
  span.innerHTML += 'd';
span.innerHTML = span.innerHTML.substring(0, span.innerHTML.length - 1);

＆＃13;

span, div {
    font-family: monospace;
    font-size: 12px; /* kept this, though it is irrelevant */
    /* line-height: 14px; omitted here as irrelevant */
}

＆＃13;

<div id=foo></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我的解决方案是使用getBoundingClientRect来获取一个字符的实际浮动宽度，然后只使用容器的宽度除以字符的宽度：

function get_char_size(div) {
    var temp = $('<span>&nbsp;</span>').appendTo(div);
    var rect = temp.find('span')[0].getBoundingClientRect();
    var result = {
        width: rect.width,
        height: rect.height
    };
    temp.remove();
    return result;
}
function get_num_chars(div, char_size) {
    var width = div.width();
    return Math.floor(width / char_size.width);
}

var container = $('.container');
var size = get_char_size(container);
var chars_per_line = get_num_chars(container, size);

有两个功能，因为如果不更改字体大小，则只能计算一次char大小，每次调整容器大小时都可以使用第二个函数。