Ответ 1
Для этого есть плагин jquery: http://fittextjs.com/
У меня есть элемент <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?
Спасибо заранее!
Для этого есть плагин jquery: http://fittextjs.com/
То, что вам нужно, называется vw
. Пример CSS: font-size: 80vw;
. vw
означает ширину окна просмотра и 80vw
= 80%
ширины экрана устройства
Проверьте свойства vw в css
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" );
}
});
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>
Я надеюсь, что это может помочь кому-то.