Decreasing Font Size When Width Overflows Div

Question

I believe my question is unique because I am using a counter whose width can constantly increase, as opposed to the container width changing, which is what seems to usually be asked.

My site is http://script-timer.com/ , and I am trying to decrease the font of the timer when it overflows its container div. Here is the javascript I am currently working on to accomplish this:

$(document).ready(function() {
    while( $('#scriptTime').width() > $('#timer-container').width() ) {
        $('#scriptTime').css('font-size', (parseInt($('#scriptTime').css('font-size')) - 1) + "rem" );
    } 
});

This looks like right to me, but being as I am very much still learning, I am most likely missing something simple. Is there a better way to accomplish this? Thank you for your help!

Answer 1

Here is a link to the plugin: https://plugins.jquery.com/textfill/ And a link to the source: http://jquery-textfill.github.io/

or

add this in css method

overflow: auto;