HTML / CSS - 调整字体大小以填充父级高度和宽度

Question

我有一个<div>元素，可以在浏览器窗口调整大小时调整大小。

在<div>里面我有一段文字：

<div style="width:80%; height:80%; margin:10%;">
    <p>Paragraph of text. Paragraph of text. Paragraph of text.</p>
</div>

我希望文本在我调整<div> font-size更改font-size ，以便文本占用100％的可用空间。

我怎样才能达到这个效果？
是否使用百分比字体大小？
我必须使用Javascript吗？

提前致谢！

Answer 1

这里有一个jquery插件： http ： //fittextjs.com/

Answer 2

查看css中的vw属性

http://www.w3schools.com/cssref/css_units.asp

Answer 3

你需要的是vw 。 CSS示例： font-size: 80vw; 。 vw表示viewerport宽度， 80vw =设备屏幕宽度的80%

Answer 4

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" ); 
    } 
}); 

Answer 5

fittext.js对我来说不正常（jQuery的插件，以及派生的jquery-free版本），也没有使用compress属性，所以我找到了另一个解决方案：

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>

我希望它对某人有所帮助。