JSFiddle - React, Tailwind, and code Playground

HTML

<p>This div uses "text-overflow:ellipsis":</p>
<table>
    <tr>
        <td><div class="div1">This is some long text that will not fit in the box Supercalifraduliciousexpialidocious</div></td>
    </tr>
</table>

CSS

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