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

Question

[Нодир Маликов]

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

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

Как сделать текст адаптивным? Чтобы его размер уменьшался при переполнении div'а?

Answer 1

[Нодир Маликов]

Updated: нашел решение: пример и библиотека

Answer 2

[Erl]

там ведь 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

Comments

[Нодир Маликов]

а как можно сразу показать без onchange и click?

[Erl]

Нодир Маликов, ну если это js то никак

[Илья]

Вешай скрипт в событие изменяющее текст

[Нодир Маликов]

Илья, событие происходит на другой странице