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/

但是，这完全取决于你的目标是什么。

Answer 2

您也可以尝试这种方法让所有字母完全适合每个方框。

http://jsfiddle.net/o1dv0n76/12/

var idealWidth = 20;
$(document).ready(function() {
    $('.comment-box').each(function() {
        if($(this).width() > idealWidth) {
            makeFit($(this),idealWidth);   
        } else {
            $(this).width(idealWidth);
        }
    });
});

function makeFit(ele, width) {
    ele.css('fontSize',parseInt(ele.css('fontSize'))-1 + 'px');
    if(ele.width() > width) {
        makeFit(ele, width);
    } else {
        ele.width(idealWidth);
    }
}

Answer 3

字体大小通过.css需要像素才能工作。我认为更清洁的版本是：

http://jsfiddle.net/o1dv0n76/13/

$('.comment-box').each(function () {
    $(this).css('font-size', '12px');
    $(this).css({
        height: 20,
        width: 20
    })
});

Answer 4

这种方法似乎有效。使用＆＃34; px＆＃34;在字体大小名称似乎也有帮助之后。

$(document).ready(function() {

    $("div.comment-box").each(function(index, element) {

        var ideal = 20;
        var fontSize = 24;
        var minFontSize = 6;

        $(element).css("font-size", fontSize + "px");

        var cw = $(element).width();
        var ch = $(element).height();

        while (cw > ideal || ch > ideal && fontSize > minFontSize)
        {
            --fontSize;

            $(element).css("font-size", fontSize + "px");

            cw = $(element).width();
            ch = $(element).height();
        }

        $(element).width(ideal);
        $(element).height(ideal);
    });
});

Answer 5

或者也许只是一个像plain'ol css这样的列表：http://jsfiddle.net/barrycrous/sawun9ct/

HTML：

AB
AB
AB
AB
AB
AB
AB
AB
AB
AB
AB
AB
AB

CSS：

ul, li {
list-style:none;
padding:0;
margin:0;
}

li {
background:teal;
font-size:12px;
color:#fff;
width:20px;
line-height:20px;
text-align:center;
margin:2px;
float:left;
}

调整多个容器中的文本大小以保留父级维度

5 个答案: