JSFiddle - React, Tailwind, and code Playground

by Brett

HTML

<h1 id="headline">Bjork was wandering down by the river when she accidentally fell in and got all wet</h1>

<p>Original Height: <em></em> / InnerHeight: <strong></strong></p>

CSS

#headline {
    width: 90%;
    height: 150px;
    overflow: hidden;
    font-size: 30px;
    line-height: auto;
    border: 1px solid red;
    text-transform: uppercase;
}

p {
    margin-top: 20px;
    color: blue;
}

JavaScript

$(function() {
    var $h = $('#headline');
    var $d = $('<div/>');
    $h.wrapInner($d);
    var $i = $('#headline div')[0];
    var height = $h.height();
    var innerHeight = $i.scrollHeight;
    while(innerHeight > height) {
        size = parseInt($h.css("font-size"), 10);
        $h.css("font-size", size - 1);
        innerHeight = $i.scrollHeight;
    }
    $('p em').text(height);
    $('p strong').text(innerHeight);
    if(height > innerHeight) {
        $h.height(innerHeight);   
    }
});