How can I auto shrink text to fit div width and height using javascript?

Question

I load information from my database which I put inside of the green boxes (in image). If the text will not properly fit the green box div because it is too long, how can I resize the text using javascript? Also the text can be on multiple lines, not just on 1. I have seen many answers online but most mess up the positioning and size of my green box div. I should mention that if the text does properly fit in the div already, I do not want to shrink it. I want it to have its default size.

.shortDescriptionContainer
{
    width:322px;
    height:60px;
    font-size:3em;
    background-color:green;
    float:left;
    margin-left:15px;
    margin-top:10px;
    text-align:center;
    overflow: hidden;
}

Answer 1

Here is one solution. It has two iterations to allow text to wrap and to prevent long words from overflowing...

I set width and min-height on the parent div, and wrap the text inside in a span tag. This allows the div to stretch vertically with the text. I check the height of the div and reduce the font size until the div reaches the min-height CSS value.

That solves the text height and wrapping. Next, we need to handle long overflowing words... For that, I check each span inside each div and shrink text of all spans within the div if any span is wider than the div. -.-

Using while loops in this way, I felt it necessary to include loop limiters that will change the div backgrounds to red if there is a problem.

Fiddle: https://jsfiddle.net/96tccod8/

$(function() {
    $('.fit-text').each(function() {
        // Fit height
        var fitHeight = parseInt($(this).css('min-height'));
        if ($(this).height() > fitHeight) {
            var c = 0;
            while ($(this).height() > fitHeight) {
                $(this).find('span').each(function() {
                    var fontSize = parseInt($(this).css('font-size'));
                    fontSize = fontSize - 1 + "px";
                    $(this).css('font-size', fontSize);
                });
                c++;
                if (c > 999) {
                    $(this).css('background', 'red');
                    break;
                }
            }
        }
        // Fit width
        var fitWidth = parseInt($(this).css('width'));
        var $div = $(this);
        $(this).find('span').each(function() {
            var c = 0;
            var spanWidth = parseInt($(this).width());
            while (fitWidth < spanWidth) {
                $div.find('span').each(function() {
                    var fontSize = parseInt($(this).css('font-size'));
                    fontSize = fontSize - 1 + "px";
                    $(this).css('font-size', fontSize);
                });
                spanWidth = parseInt($(this).width());
                c++;
                if (c > 999) {
                    $div.css('background', 'red');
                    break;
                }
            }
        });
    });
});

.fit-text {
    display: block;
    float: left;
    /* width and min-height values are important */
    width: 240px;
    min-height: 50px;
    background: darkgreen;
    margin: 10px;
}

.fit-text span {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="fit-text">
    <span>TEST</span>
</div>

<div class="fit-text">
    <span>SUPERMEGAMANXZERO</span>
</div>

<div class="fit-text">
    <span>TEST TEST </span>
    <span>SECONDSPANLONGWORD</span>
</div>

<div class="fit-text">
    <span>TEST TEST TEST</span>
</div>

<div class="fit-text">
    <span>TEST TEST TEST TEST TEST</span>
</div>

<div class="fit-text">
    <span>TEST TEST TEST TEST TEST TEST TEST TEST</span>
</div>