>我正在做一个div,需要显示文本字段的全部内容并动态调整文本大小,以免溢出。
要了解问题,请查看此处 http://sandbox.littlegraffyx.com/bible/
您可以尝试使用"创世记 1:1"的格式GEN 1:1
在左下角文本框中输入经文
我的问题是当我尝试显示长诗句时,它们会被截断。我需要根据当前文本的长度更改大小。是否有一些可以根据文本字段大小应用的 css?
如注释中所述,使用纯 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/
你可以尝试这样的事情。它将输入字段设置为 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>