JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Quickfit - fit text size inside specific height</h1>
<pre>
<u>Usage in HTML:</u>
&lt;div style="display:inline-block" class="quickfit" minfont=10 maxfont=40 maxheight=50>
    Some dynamic text that will fit inside max height
&lt;/div>

min/maxfont = min and max font size allowed for this text
maxheight = max height allowed for this element
To make the final result look good as part of a list please also set min-height in css.

 <u>Usage in jQuery:</u>
$(element).quickfitText({maxHeight: 100, minFontSize: 10, maxFontSize:30});

Based on:
http://jsfiddle.net/tubededentifrice/u5y15d0L/3/
http://stackoverflow.com/a/29284016/3356679

Cons:
- Must get max height, max font and min font size to work
- Does not support changing line-height
- Does not support limiting by width

Example for max height 50:
</pre>

<div id="cont">
  <div class="quickfit" minfont=5 maxfont=60 maxheight=50>Some dynamic text that will fit inside max height</div>
  <div class="quickfit" minfont=5 maxfont=60 maxheight=50>Some dynamic text</div>
  <div class="quickfit" minfont=5 maxfont=60 maxheight=50>Text</div>
</div>

CSS

#cont {
}

#cont div {
  float:left;
  text-align:center;
  display:inline-block;
  padding:2px 5px;
  width:100px;
  min-height:50px;
}
#cont div:nth-child(even) {
  background:#bbb;
}
#cont div:nth-child(odd) {
  background:#ccc;
}

#cont div:first-child {
	border-radius:10px 0 0 10px;
}
#cont div:last-child {
	border-radius:0 10px 10px 0;
}

JavaScript

// Quickfit - fit text size inside specific height
// Usage: 
// <div style="display:inline-block" class="quickfit" minfont=10 maxfont=40 maxheight=50>some dynamic text that will fit inside max height</div>
// min/maxfont = min and max font size allowed for this text
// maxheight = max height allowed for this element
// 
// Usage jQuery:
// $(element).quickfitText({maxHeight: 100, minFontSize: 10, maxFontSize:30});

// Based on:
// http://jsfiddle.net/tubededentifrice/u5y15d0L/3/
// http://stackoverflow.com/a/29284016/3356679

jQuery.fn.extend({

    // get style attributes that were actually set on the first element of the jQuery object
    getStyle: function (prop) {
        var elem = this[0];
        var actuallySetStyles = {};
        for (var i = 0; i < elem.style.length; i++) {
            var key = elem.style[i];
            if (prop == key)
                return elem.style[key];
            actuallySetStyles[key] = elem.style[key];
        }
        if (!prop)
            return actuallySetStyles;
    },

    quickfitText: function (options) {
        options = options || {};
        return this.each(function () {
            var $elem = jQuery(this);
            var elem = $elem[0];
            var maxHeight = options.maxHeight || parseInt($elem.attr('maxheight')) || parseInt($elem.css('min-height')) || 50;
            var maxFontSize = options.minFontSize || parseInt($elem.attr('maxfont')) || 300;
            var minFontSize = options.maxFontSize || parseInt($elem.attr('minfont')) || 7;

            //The magic happens here
            var fontSize = maxFontSize;
            // backup original style
            var style = $elem.getStyle();
            style['line-height'] = elem.style.lineHeight = 'normal'; // intentionally set this
            elem.style.transition = 'none';
            elem.style.display = 'inline';
            elem.style.minHeight = '0';
            // Gradually decrease font size until the element height is ok
           ...