How to shrink and adapt the text to fit the block, not the browser?

• 0
  There is a block. It is filled with text when certain events occur. But with a large amount of text, it goes beyond the block border. I add overflow but the bottom of the text is cut out.
  
  Found it on the forum, but then after adding the text a scroll just appears, and I just need the text to decrease:
  codepen.io/iiil/pen/yDbtL
  It also has a "add text" button, which adds the same text twice and the text is reduced, but I need to place the text in a block without this button and without adding text.
  
  How do I make the text responsive? To make it shrink when the div overflows?

  JavaScript Anonymous, Jun 28, 2019

---

2 Answers
• 0
  Updated: found a solution: example and library

  Anonymous

---

• 0
  there, after all, the JS code is already ready, take it and use it
  
  

  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]);
  
  });

  
  
  But if used without a button, you will need to watch the block change (onchange) and apply the scale function

  Anonymous

---