JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
    <td class="ellipsis">THIS is a lot of text that I want to hide</td>
    <td class="hide"> I do not want to hide this text</td>
    </tr>
</table>

CSS

td.ellipsis {
    max-width:30px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

td.hide {
    max-width:30px;
    overflow:hidden;
    white-space: nowrap;
}