JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>
      This content should shorten to ellipses after the 50px width has been reached.
    </td>
  </tr>
</table>

CSS

td {
    white-space: nowrap; 
    width: 50px; 
    overflow: hidden;
    text-overflow: ellipsis;
}