Есть заголовок внутри адаптивного блока.
Необходимо чтобы сам текст занимал свободное пространство родительского блока по ширине и соответственно увеличивался и уменьшался в размерах.
<div class='container'>
<h1>Заголовок</h1>
</div>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсть заголовок внутри адаптивного блока.
Необходимо чтобы сам текст занимал свободное пространство родительского блока по ширине и соответственно увеличивался и уменьшался в размерах.
<div class='container'>
<h1>Заголовок</h1>
</div>
Вариант на CSS.
vw
- еденица измерения, равная проценту ширины документа:
div{
font-size: 8.1vw;
white-space: nowrap;
}
<div>Некоторый тестовый текст</div>
Он довольно неточен, поэтому я поставил white-space: nowrap;
Вариант с масштабированием.
Блок с текстом масштабируется с помощью JS и CSS transform
function fillDiv(div, proportional) {
var div=$('#test')
var currentHeight = div.outerHeight();
var currentWidth = div.outerWidth()+3;
var availableHeight = window.innerHeight;
var availableWidth = window.innerWidth;
var scale = availableWidth / currentWidth;
div.css({
"left": "0px",
"top": "0px",
"transform": "scale3d(" + scale + ", " + scale + ", 1)",
"transform-origin": "0 0"
});
}
fillDiv();
$( window ).resize(fillDiv)
#test{
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">Некоторый тестовый текст</div>
Стырено и адаптировано из amazon
Обернём текст инлайн-элементом (в нашем случае это <span>
) для того, чтобы вычислять ширину текста. Добавим для этого элемента свойство white-space: nowrap
— так при инкрементальном увеличении текст не перенесется на другую строку и высчитываемая ширина не изменится.
Проверяем что больше — ширина страницы или ширина текста. Если текст больше, то в цикле уменьшаем его до тех пор, пока он не станет меньше. Если текст меньше, то в цикле увеличиваем его. Если в каком-либо из этих циклов произошел перебор с увеличением или уменьшением, то откатываем изменения назад и выходим из цикла.
Навешиваем на событие resize
исполнение этой функции. Чтобы она не вызывалась при каждом событии и чтобы не сильно нагружать браузер, добавим функцию debounce()
— так она вызовется один раз спустя 250 мс после окончания события.
P.S. пример не слишком хорош, потому что будет слишком часто дергаться DOM и начинаться перерисовка страницы, так что рекомендую подумать над тем, чтобы его улучшить :-)
start();
window.addEventListener('resize', debounce(start, 250));
function getCurrentFz(selector) {
let style = window.getComputedStyle(selector, null).getPropertyValue('font-size'),
fontSize = parseFloat(style)
return fontSize;
};
function debounce(func, wait, immediate) {
let timeout;
return function() {
let context = this,
args = arguments,
later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
},
callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
function start() {
let body = document.body,
bodyWidth = body.getBoundingClientRect().width,
selectorInner = document.querySelector('h1 span'),
fz = getCurrentFz(selectorInner);
if (bodyWidth > selectorInner.offsetWidth) {
while (bodyWidth > selectorInner.offsetWidth) {
fz += 1;
selectorInner.style.fontSize = fz + 'px';
if (bodyWidth < selectorInner.offsetWidth) {
selectorInner.style.fontSize = fz - 1 + 'px';
break;
}
}
} else {
while (bodyWidth < selectorInner.offsetWidth) {
fz -= 1;
selectorInner.style.fontSize = fz + 'px';
if (bodyWidth > selectorInner.offsetWidth) {
selectorInner.style.fontSize = fz + 1 + 'px';
break;
}
}
}
};
h1 {
margin: 0;
}
h1 span {
white-space: nowrap;
}
<h1><span>Some text in header</span></h1>
Используйте относительные единицы rem, em. Еще можно использовать vw, вот стаття с ришением похожей проблемы как у вас. Статья
Например вот так:
$('.jsFontSize').each(function(){
var fontSize = 14;
var rowHeight = $(this).height();
while(rowHeight>20){
fontSize=fontSize-1;
$(this).css({fontSize: fontSize+'px'});
rowHeight = $(this).height();
}
});
.wrapper {
font-size: 14px;
min-height: 20px;
line-height: 20px;
}
.jsFontSize {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="jsFontSize">
Текст текст текст текст текст текст
</div>
</div>
<div class="wrapper">
<div class="jsFontSize">
Текст текст текст текст текст текст
Текст текст текст текст текст текст
Текст текст текст текст текст текст
Текст текст текст текст текст текст
Текст текст текст текст текст текст
</div>
</div>