根據高度（垂直長度）調整大小

-1

我正在做一個div，需要顯示文本字段的全部內容並動態調整文本大小以使其不會溢出。根據高度（垂直長度）調整大小

要得到這個問題的想法，看看這裏http://sandbox.littlegraffyx.com/bible/

您可以嘗試在左下角的文本框中輸入經文使用格式GEN 1:1爲「創世紀1：1」

我的問題是，當我嘗試要顯示長詩，他們會被截斷。我需要根據當前文本的長度來改變大小。是否有一些可以基於文本字段大小應用的CSS？

來源

2012-06-16 Wayne

你想要一個jQuery代碼嗎？ – shahbaz

這個問題很多，但對於初學者，您在打算擁有類的元素上使用ID（每個元素的ID應始終是唯一的，從不重複）。另外，你應該使用CSS盒模型來獲得好處，而不是與之對抗。 – jcolebrand

謝謝..其實我剛剛開始啓動，我真的不知道我在用什麼。無論我在網上找到什麼。爲箱子模型。你是指這個嗎？ – Wayne

正如評論中提到的那樣，使用純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/

來源

2012-06-16 07:09:32

我很好奇：爲什麼downvote？是因爲我提供了一個JS解決方案，還是我的答案在某些方面有缺陷？評論將允許我解決與我的答案有關的任何問題。 –

這太好了。這正是我需要的。不幸的是，我無法將其應用於我的項目。你能檢查什麼是錯的？這是我的測試頁面。 http://sandbox.littlegraffyx.com/bible/test.html – Wayne

我忘了提。嘗試在左下方的文本框中輸入「gen 2:19」以顯示足夠的文本內容。 – Wayne

你可以嘗試這樣的事情。它將輸入字段設置爲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>

來源

2012-06-16 07:14:11 Anonymous

OP想改變大白色文本（詩句）的大小，而不是表單輸入。 –

根據高度（垂直長度）調整大小

回答

相關問題