JSFiddle - React, Tailwind, and code Playground

HTML

<p>The following two divs contains a long text that will not fit in the box. As 
you can see, the text is clipped.</p>
<p>This div uses "text-overflow:ellipsis":</p>

<div class="test" style="text-overflow:ellipsis;" title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>
<p>This div uses "text-overflow:clip":</p>
<div class="test" style="text-overflow:clip;" title="This is some long text that will not fit in the box">This is some long text that will not fit in the box</div>

CSS

div.test
{
white-space:nowrap; 
width:12em; 
overflow:hidden; 
border:1px solid #000000;
}