JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
  <tr>
    <td>
      <div title="Hello">Hello</div>
    </td>
    <td>
      <div title="-">-</div>
    </td>
    <td>
      <div title="This is a super long cell. The quick brown fox jumped over the lazy dog. The five boxing wizards jump quickly.">
        This is a super long cell. The quick brown fox jumped over the lazy dog. The five boxing wizards jump quickly.
      </div>
    </td>
    <td>
      <div title="World">World</div>
    </td>
  </tr>
</table>

CSS

table {
  width: 100%;   // This can be set to whatever.
}

td div {
  max-height: 1.1em;
  overflow: hidden;
  position: relative;
  color: transparent;
}

td div::after {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: black;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}