JSFiddle - React, Tailwind, and code Playground

HTML

<h3>
 Lines
</h3>
<input type='number' id='lines' min=1 value=1>
<br/>
<h3>
 Text:
</h3>
<div id='truncateme'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nibh libero, iaculis euismod semper in, molestie vitae elit. Integer efficitur pellentesque massa nec vestibulum. In a libero leo. Cras viverra leo ac mauris ornare, eget pretium neque egestas. Sed ultricies lacus sit amet dolor semper semper. Integer dignissim, nulla a vestibulum tincidunt, urna ante elementum nisi, eget lobortis risus odio ut turpis. Aliquam orci odio, sodales ac mollis eget, scelerisque sed nisl. Vestibulum accumsan lectus tortor, vitae auctor mi pretium vel. Aliquam ornare mollis lacus, vitae tempor tellus sollicitudin quis. Nullam eget lobortis risus. Vestibulum nec vehicula orci. Suspendisse condimentum, ligula rhoncus imperdiet gravida, libero ipsum faucibus eros, in convallis mi orci in purus. Proin posuere nibh nulla, at euismod dolor porta a. Proin a magna sed arcu pulvinar faucibus quis sed leo. Donec posuere ultricies vestibulum.
</div>

CSS

#truncateme {
   width:400px;
}

JavaScript

const linesElement=document.getElementById('lines');
const truncateElement="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nibh libero, iaculis euismod semper in, molestie vitae elit. Integer efficitur pellentesque massa nec vestibulum. In a libero leo. Cras viverra leo ac mauris ornare, eget pretium neque egestas. Sed ultricies lacus sit amet dolor semper semper. Integer dignissim, nulla a vestibulum tincidunt, urna ante elementum nisi, eget lobortis risus odio ut turpis. Aliquam orci odio, sodales ac mollis eget, scelerisque sed nisl. Vestibulum accumsan lectus tortor, vitae auctor mi pretium vel. Aliquam ornare mollis lacus, vitae tempor tellus sollicitudin quis. Nullam eget lobortis risus. Vestibulum nec vehicula orci. Suspendisse condimentum, ligula rhoncus imperdiet gravida, libero ipsum faucibus eros, in convallis mi orci in purus. Proin posuere nibh nulla, at euismod dolor porta a. Proin a magna sed arcu pulvinar faucibus quis sed leo. Donec posuere ultricies vestibulum.";
const truncateText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nibh libero, iaculis euismod semper in, molestie vitae elit. Integer efficitur pellentesque massa nec vestibulum. In a libero leo. Cras viverra leo ac mauris ornare, eget pretium neque egestas. Sed ultricies lacus sit amet dolor semper semper. Integer dignissim, nulla a vestibulum tincidunt, urna ante elementum nisi, eget lobortis risus odio ut turpis. Aliquam orci odio, sodales ac mollis eget, scelerisque sed nisl. Vestibulum accumsan lectus tortor, vitae auctor mi pretium vel. Aliquam ornare mollis lacus, vitae tempor tellus sollicitudin quis. Nullam eget lobortis risus. Vestibulum nec vehicula orci. Suspendisse condimentum, ligula rhoncus imperdiet gravida, libero ipsum faucibus eros, in convallis mi orci in purus. Proin posuere nibh nulla, at euismod dolor porta a. Proin a magna sed arcu pulvinar faucibus quis sed leo. Donec posuere ultricies vestibulum.";


const getLineHeight =...