jquery - 在固定大小的 div 中调整文本大小以适应

Question

我有一个<div>400px 宽和 100px 高的。<div>我想在其中放置一个长度不同的标题，如果它足够长，它将占用两行（即<div>默认字体大小为 50 像素）。我想让文本从 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/