Question

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

在<div>内，我有一段文字：

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

我希望在调整font-size大小时更改<div>文本，以便文本占用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表示查看器端口宽度，设备屏幕宽度为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>

我希望它对某人有帮助。

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

5 个答案: