HTML/CSS - настройка размера шрифта для заполнения родительской высоты и ширины

У меня есть элемент <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?

Спасибо заранее!

Ответы

Ответ 2

То, что вам нужно, называется vw. Пример CSS: font-size: 80vw;. vw означает ширину окна просмотра и 80vw= 80% ширины экрана устройства

Ответ 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" ); 
    } 
});

Ответ 5

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>

Я надеюсь, что это может помочь кому-то.