Как уменьшать и адаптировать текст, когда он не помещается в блок?

Есть блок. Он заполняется текстом при определенных событиях. Но при большом объеме текста, он выходит за границу и заслоняет блок, который рядом.
Как сделать текст адаптивным? Чтобы его размер уменьшался при переполнении div'а?
  • Вопрос задан
  • 25893 просмотра
Пригласить эксперта
Ответы на вопрос 6
Думаю вам подойдет использование vh. Например:
.some-text {
    font-size: 100vh;
    line-height: 100vh;
}

Вот статья на хабре
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Пример:
codepen.io/iiil/pen/yDbtL

При добавлении текста вызывайте функцию scale. Переменные step и minfs — это шаг изменения размера шрифта и минимальный размер шрифта. При достижении минимума, появляется вертикальный скролл.
Ответ написан
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Сдаётся мне, что задача некорректна с самого начала. Чем прокрутка не угодила?
Ответ написан
barkalov
@barkalov
function onTextChange() {
    var textLength = $('.textHolder').text().length;
    var fontSize = Math.min(12, (1000 / textLength) * 12); 
    //where 12 - typical font-size, 1000 - typical length
    $('.textHolder').css('font-size', fontSize+'px');
{

Это с jQuery. На ванильном js можете переписать сами.
Ответ написан
Такой вариант не подойдёт?
htmlbook.ru/css/text-overflow
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы