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

发布于 2024-12-11 06:21:23 字数 511 浏览 0 评论 0原文

我有一个

元素，它会随着浏览器窗口大小的调整而调整大小。

在

内，我有一段文本：

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

我希望文本在调整

大小时更改 font-size 。，这样文本就会占据 100% 的可用空间。

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

提前致谢！

原文

I have a <div> element that resizes as the browser window resizes.

Inside the <div> I have a paragraph of text:

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

I want the text to change font-size as I resize the <div>, so that the text will occuypy 100% of the available space.

How can I achieve this effect?
Would it be with a percentage font-size?
Would I have to use Javascript?

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

╭⌒浅淡时光〆 2024-12-18 06:21:23

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

回复收藏 0 原文

谈场末日恋爱 2024-12-18 06:21:23

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

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

回复收藏 0 原文

情魔剑神 2024-12-18 06:21:23

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>

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

fittext.js did not work correctly for me (plugin for jQuery, as well as derived jquery-free version), nor with using of compressor attribute, so I found another solution:

http://www.dhtmlgoodies.com/?whichScript=text_fit_in_box
(someone's another work)

which works perfectly for me - longer texts as well as shorter texts.

It just do not react to resize of window (it works just once on loading of page), so I have written this short code to run it automatically after each window resize (it works for me):

<script>
      function calculate_font_sizes()
      {
        fitTextInBox('login-h1');
        fitTextInBox('subtittle');
      }
      calculate_font_sizes();
      window.addEventListener('resize', calculate_font_sizes);

</script>

I hope it can help to someone.

回复收藏 0 原文