Phayo
@Phayo
Притворись дураком 5 минут, чем быть им всю жизнь.

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

Есть блок. Он заполняется текстом при определенных событиях. Но при большом объеме текста, он выходит за границу блока. Добавляю overflow но нижняя часть текста вырезается.

Нашёл это на форуме, но тут после добавления текста просто появляется скролл, а мне надо чтобы просто текст уменьшался:
codepen.io/iiil/pen/yDbtL
В нём есть ещё и кнопка "добавить текст", которая добавляет тот же самый текст два раза и текст уменьшается, но мне нужно без этой кнопки и без добавления текста текст разместился в блок.

Как сделать текст адаптивным? Чтобы его размер уменьшался при переполнении div'а?
  • Вопрос задан
  • 143 просмотра
Решения вопроса 1
Phayo
@Phayo Автор вопроса
Притворись дураком 5 минут, чем быть им всю жизнь.
Updated: нашел решение: пример и библиотека
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
NooBiToo
@NooBiToo
там ведь JS код уже готовый, берите да используйте
function scale(block) {
  var step = 0.1,
      minfs = 9,
      scw = block.scrollWidth,
      w = block.offsetWidth;
  if (scw < w) {
    var fontsize = parseInt($(block).css('font-size'), 10) - step;
    if (fontsize >= minfs){
      $(block).css('font-size',fontsize)
      scale(block);
    }
  }
}
// demo
var text = $('div').html();
$('a').click(function(){
  $('div').html($('div').html() + text);
  scale($('div')[0]);
});

Но если использовать без кнопки, вам нужно будет следить за изменением (onchange) блока и применять функцию scale
Ответ написан
Ваш ответ на вопрос

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

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