JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="ta"></textarea>
<br />
<input type="button" value="test" onclick="calc()" />

CSS

* {
   font-size: 12px;
    font-family: verdana;
}

JavaScript

function calc() {
    var ta = document.getElementById('ta');
    if (!ta.value) {alert(0); return;}
    var div = document.createElement('div');
    div.style.width = ta.scrollWidth + 'px';
    div.style.height = '20px';
    div.style.overflow = 'hidden';
    div.style.position = 'absolute';
    div.style.top = '0px';
    div.style.left = '0px';
    div.style.wordWrap = 'break-word';
    
    document.body.appendChild(div);
    var r=0, arr = ta.value.split('\n');
    for(var i=0; i<arr.length; ++i) {
        div.innerHTML = '<span>' + arr[i] + '</span>';
        r += div.firstChild.getClientRects().length;
    }
    document.body.removeChild(div);
    alert(r);
}