Question

我有<div>，宽400像素，高100像素。我想在一个长度不同的标题中放置一个标题，如果它足够长，它将在<div>中占用两行（即<div>的默认字体大小为50px）。我希望文本以50px开头，并且如果文本太长而无法放入两行的框中，请将其缩小。

我该如何解决这个问题？我已经玩了几个小时的Javascript，但我无法想出或找到任何东西。我能找到的就是如何在一行上为文本做这件事。

Answer 1

您需要一些JavaScript来解决这个问题。这是我的示例标记

<div style="width: 400px; border: 1px solid black;">
    <span style="display: inline-block; font-size: 50px;">This is my text that I want to fit</span>
</div>

我给了跨度显示值inline-block，所以我可以测量它的宽度。

然后，以下基于jquery的脚本会让它眨眼，直到它有点太小。

$(function() {
    var span = $('span');
    var fontSize = parseInt(span.css('font-size'));

    do {
        fontSize--;
        span.css('font-size', fontSize.toString() + 'px');
    } while (span.width() >= 400);
});

查看JSFiddle进行演示：http://jsfiddle.net/gEjTz/

调整固定大小div中的文本以适合

1 个答案: