HTML / CSS - настроить размер шрифта, чтобы заполнить родительскую высоту и ширину - PullRequest
Новая
       4

HTML / CSS - настроить размер шрифта, чтобы заполнить родительскую высоту и ширину

15 голосов
/ 19 октября 2011

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

Заранее спасибо!

Ответы [ 5 ]

9 голосов
/ 19 октября 2011

Для этого есть плагин jquery: http://fittextjs.com/

2 голосов
/ 25 января 2017

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

2 голосов
/ 14 сентября 2016

Проверьте свойства vw в css

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

1 голос
/ 19 октября 2011

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 голосов
/ 25 ноября 2014

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>

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

...