JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ngActivityHeader fitin">Post long word</div>

CSS

.fitin {
    width: 150px;
    height: 32px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 44px;
}

JavaScript

(function ($, window, undefined) {
    
    /* 
     * public methods
     * 
     * $(selector).smartFit('methodName', arg1, arg2, ... argn)
     * where "autoFitText" is the name of your plugin and "methodName" is the name of a function available in
     * the "methods" object below; arg1 ... argn are arguments to be passed to the method
     * 
     * or, from within the plugin itself, as
     * methods.methodName.call($this, arg1, arg2, ... argn);
     * where "methodName" is the name of a function available in the "methods" object below
     */

    var methods = {
        init: function (opts) {
            var options = $.extend({}, $.fn.smartFit.defaults, opts),
                $this = $(this).data('options', options);
            
            return this.each(function () {
                methods.smartFit.call($this);
            });
        },

        // Public: smartFit text within the element
        //
        // minFontPx : 14, // Smallest the font will get in px. default: 14
        // maxFontPx : 16, // Largest the font will get in px. The font guessing will begin at this size. default: 16
        // innerWrapper : 'span' // inner wrapping element type, ex. span or div.
        //
        // Returns: the jQuery elements 
        //
        // Examples
        //
        //   $('.smartfit').smartFit({maxFontPx: 44, minFontPx:12});
        //   $('.smartfit').smartFit({innerWrapper: 'div'});
        
        smartFit: function () {
            var $this = this,
                opt = this.data('options'),
                element = $(this),
                fontSize = opt.maxFontPx,
                minFontSize = opt.minFontPx,
                $text,
                textHeight,
                textWidth,
                maxHeight = element.height(),
                maxWidth = element.width();

            if (element.children().length === 0) {
                element.wrapInner('<' + opt.innerWrapper + '/>');
                $text = $(opt.innerWrapper,...