JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo">
   This
    is
    some text
    Narrow narrow text.
    Don't know how many lines.
    jf,gyjufyujfgyu igti.luigt
    hjf,jyfu 
</div>

CSS

div#foo { width: 50px; height: 60px; border: 1px solid red; }

JavaScript

// calculate height per line
$foo = $('<div/>').css({
    width: '50px',
    position: 'absolute',
    left: '-2000px',
    border: '1px solid purple'
}).html('A<br />B<br />C<br />D<br />E<br />');

$('body').append($foo);

var lineheight = $foo.height() / 10;

$origdiv = $('div#foo');
$measurediv = $origdiv.clone();
$measurediv.css({
    position: 'absolute',
    left: '-1000px',
    height: 'auto',
    border: '1px solid green'
});
$('body').append($measurediv);

var numlines = $measurediv.height() / lineheight;

alert('The unrestricted box height is ' + numlines + ' lines of text');