JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="foo">This is the long text. This is the long text. This is the long text. This is the long text. This is the long text. This is the long text. This is the long text. This is the long text. This is the long text. This is the long text. </textarea>
<button onclick="checkMulti('foo')">Check</button>
<hr>
<textarea id="bar">This is text.</textarea>
<button onclick="checkMulti('bar')">Check</button>

CSS

textarea {
    width: 150px;
}
.nowrap {
    overflow-x: scroll;
    white-space: nowrap;
    padding: 0;
}

JavaScript

function checkMulti(id) {
    var ta = $('#'+id), multi = false;//.clone();
    ta.addClass('nowrap');
    console.log(ta.width());
    console.log(ta[0].scrollWidth);
    multi = ( ta[0].scrollWidth > ta.width() );
    ta.removeClass('nowrap');
    alert('Spread over multiple-lines: ' + multi);
}