css - 根据高度(垂直长度)调整尺寸

Question

我正在做一个 div，它需要显示文本字段的全部内容并动态调整文本大小以使其不会溢出。

要了解问题，请看这里 http://sandbox.littlegraffyx.com/bible/

您可以尝试使用格式 GEN 1:1 for "Genesis 1:1"在左下方的文本框中输入经文

我的问题是当我尝试显示长诗句时，它们被截断了。我需要根据当前文本的长度更改大小。是否有一些可以根据文本字段大小应用的 css？

Answer 1

如评论中所述，使用纯 CSS 无法根据包含元素的高度缩放文本。但这里有一个小的 jQuery 脚本，我过去在需要实现你想要的东西时使用过。它还会在用户调整浏览器窗口大小时调整文本大小。

HTML:

<p class="quote">
Really long text goes here...
</p>​

CSS:

.quote {
    // The largest size to display text at.
    font-size: 36px;
}​

JS:

$(window).bind('resize',function(e){
    scaleQuote();
});

function scaleQuote(){    
    var quote = $('.quote');
    var winH = $(window).height();

    // Reset font size.
    quote.css('font-size', '');

    // If quote is larger than viewport, reduce font-size until it fits.
    while (winH < (quote.height())){
        var fontSize = parseInt(quote.css('font-size'), 10);
        quote.css('font-size', fontSize-1+'px');
    }
}

scaleQuote();​

演示:http://jsfiddle.net/eCBmc/2/