Question

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

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

您可以尝试使用格式GEN 1:1为“创世纪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/

Answer 2

你可以尝试这样的事情。它将输入字段设置为10个字符，如果它更大则增加它的大小。 http://jsfiddle.net/4qjjf/1/

<html>
<body>
<textarea cols="10" rows="1" id="shit"
onkeyup="this.cols=this.value.length>10?this.value.length:10;"></textarea>
</body>
</html>

根据高度（垂直长度）调整大小

2 个答案: