JSFiddle - React, Tailwind, and code Playground

by Mike Gleeson

JavaScript

function util_fitTextToElement(element, text, width) {
    if (element instanceof Element) {
        element = $(element);
    }

    if (element instanceof jQuery) {

        text = util_forceString(text, element.text());

        var size = element.css('font-size').replace(/(?![+-]?\d*\.?\d+|e[+-]\d+)[^0-9]/g, '');

        size = util_forceInt(size, 10);

        width = util_forceInt(width, element.width());

        var resizer = $(".HiddenTextResizer");

        if (resizer.length == 0) resizer = $('body').append("<div class='HiddenTextResizer'></div>").find(".HiddenTextResizer");

        resizer.html(text).css({ 'font-size': size + 'px', 'font-weight': element.css('font-weight'), 'font-family': element.css('font-family'), 'text-transform': element.css('text-transform'), 'padding': element.css('padding') });

        while (resizer.width() > width && size > 0) {
            size--;
            resizer.css("font-size", size);
        }

        if (size <= 0) {
            util_logError("ERROR: 'util_fitTextToElement' -> TEXT '" + text + "' unable to fit in element with WIDTH: " + width);
            element.css("font-size", '0.1px').html(resizer.html());
        } else {
            element.css("font-size", size).html(resizer.html());
        }
    } else {
        util_logError("ERROR: 'util_fitTextToElement' -> OBJECT is not DOM Element");
    }

    resizer.html("");
}