javascript - 调整多个容器中的文本大小以保留父尺寸

Question

我现在遇到的问题是，我在一个页面上有多个 div 元素(考虑到可伸缩性，我正在测试几百个)，其中包含数据库中名称的首字母。

我希望它们都显示在一个页面上，就像这样；

http://jsfiddle.net/o1dv0n76/2/

问题是，出于显示目的，我希望它们都是相同的像素 (20 * 20)，这样它们看起来就像一个网格。

这需要调整文本大小，以便两个首字母都适合父元素的尺寸。

我已经用 jQuery 尝试过这个，但它只会让浏览器崩溃，所以这显然不是很有效。

也就是说，经过漫长的等待，它确实成功了。

我很好奇是否有更流线型的方法来实现这一目标。

我使用的jQuery如下；

$(document).ready(function() {
    $('.comment-box').each(function() {
        $(this).css('font-size', '12');
        var curWi = $(this).width();
        var curHi = $(this).height();
        var ideal = 18;
        var size  = 12;

        while (curWi > ideal || curHi > ideal) {
            size  = size - 1;
            $(this).css('font-size', size);
            curWi = $(this).width();
            curHi = $(this).height();
        }
        $(this).css({
            height:     ideal,
            width:      ideal
        })
    });
});

编辑:请原谅我的命名约定，我在模拟过程中没有考虑太多。

Answer 1

Yout 脚本挂起是因为您的 line-height 为 20px，但您选择的理想高度为 18。无论您将字体大小减小多少，高度始终为 20px ，它大于 18，所以你陷入了无限循环。

将理想值更改为 20:

var ideal = 20;

它会起作用:

http://jsfiddle.net/jtbowden/1r8abvom/

作为旁注，如果您跟踪最小字体大小，您可以在完成后将所有 div 设置为相同的字体大小，并且您的网格看起来会更加一致:

http://jsfiddle.net/jtbowden/1r8abvom/1/

但是，这完全取决于您的目标。