我有一個<div>元素，可在瀏覽器窗口調整大小時調整大小。HTML/CSS - 調整字體大小以填充父級高度和寬度
的<div>裏面我有一段文字：
<div style="width:80%; height:80%; margin:10%;">
<p>Paragraph of text. Paragraph of text. Paragraph of text.</p>
</div>
我想要的文字改變font-size爲我調整<div>，以便文本將occuypy可用空間的100％。
我該如何達到這個效果？
這是百分比字體大小嗎？
我必須使用Javascript嗎？
在此先感謝！
有此jQuery插件：http://fittextjs.com/
哦，你不敢讓我們在段落文本中使用FitText來捕捉你。這僅適用於巨大的顯示文字！ – Jawad
感謝您的插件！任何更輕量級？ jQuery對我的好看的網站有點肥胖。:) –
有什麼支持段落？ –
HTML
<div id="change" style="margin:10%;">
<p>Paragraph of text. Paragraph of text. Paragraph of text.</p>
</div>
CSS
#change {
width: 80%;
height: 80%;
border: 1px solid black;
overflow: hidden;
font-size: 1em;
}
JAVASCRIPT
$(function() {
while($('#change div').height() > $('#change').height()) {
$('#change div').css('font-size', (parseInt($('#change div').css('font-size')) - 1) + "px");
}
});
取自 - http://stackoverflow.com/questions/6112660/how-to-resize-automatically-a-font-size-inside-a-div – Jawad
爲什麼使用JS，而有純CSS的選項？ –
fittext.js沒有正常工作對我來說（jQuery插件，以及衍生自由jQuery的版本），也沒有用壓縮機的屬性，所以我找到了另一種解決辦法：
http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box （某人的另一部作品）
這對我來說完美的作品 - 更長的文本以及更短的文本。
它只是還沒有反應過來調整窗口大小的（它只是一次在頁面加載），所以我寫了這個短碼到每個窗口大小調整後自動運行它（我的作品）：
<script>
function calculate_font_sizes()
{
fitTextInBox('login-h1');
fitTextInBox('subtittle');
}
calculate_font_sizes();
window.addEventListener('resize', calculate_font_sizes);
</script>
我希望它可以幫助某人。
爲什麼使用JS，雖然有純CSS的選項？ –
@Zeus Zdravkov：哪條路？ –
你需要的大衆特性被稱爲vw。示例CSS：font-size: 80vw;。 vw表示設備屏幕寬度爲80vw = 80%設備屏幕寬度爲
如果您的文字改變會發生什麼？你如何確保文本仍佔用所有可用空間？ –
@Sébastien提示：有兩種變體。 變體1：通過改變文字的腳本，還可以改變font-size屬性。 變體2：使用JS來計算文本大小，然後設置font-size屬性 –
100％字體大小將查看所使用字體的大小並轉至其默認大小的100％，它不會查看您盒子的高度。 – animuson
@animuson感謝您的信息！我也這麼想。任何解決方案 –
保證金：80％做什麼？ – Jawad