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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!