JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<textarea id="inpt" type="text" class="txt">ffwefefa</textarea>
<div id="inpt-width"></div>

CSS

textarea
{
    width:50px;
    overflow: hidden;
    white_space: nowrap;
}

#inpt
{
    resize: none;
}

JavaScript

//AutoSize TextArea Horizontalmente
$.fn.textWidth = function(text)
{
    if (!$.fn.textWidth.fakeEl) 
     $.fn.textWidth.fakeEl = $('<span>').appendTo(document.body);
    
    $.fn.textWidth.fakeEl.css("position", "fixed");
    $.fn.textWidth.fakeEl.css("left", "100px");
    $.fn.textWidth.fakeEl.css("top", "100px");
    var origText = text || this.val() || this.text();
    
    //martelada para funcionar os "enters"
    if ((origText.length>0)&&(origText[origText.length-1]=='\n'))
        origText+="A";
       
    var find = '\n';
    var re = new RegExp(find, 'g');
    var resText = origText.replace(re, "<br>");
    var find = ' ';
    var re = new RegExp(find, 'g');
    var resText = resText.replace(re, "&nbsp;");

    $.fn.textWidth.fakeEl.html(resText);
    $.fn.textWidth.fakeEl.css('font', this.css('font'));
    $.fn.textWidth.fakeEl.css('font-family', this.css('font-family'));
    $.fn.textWidth.fakeEl.css('font-size', this.css('font-size'));
    
    return $.fn.textWidth.fakeEl[0].getBoundingClientRect();
};

$('#inpt').on('input', function()
{
    var currWidth=$(this).textWidth().width;
    var currHeight=$(this).textWidth().height;
    $("#inpt").css("width", currWidth + "px");
    $("#inpt").css("height",currHeight + "px");
    $('#inpt-width').html($(this).textWidth().width + 'px');
}).trigger('input');