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

Question

我有<div>400px宽和100px高.我想在一个长度不同的标题中放置一个标题,<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/