JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1">
  <tr>
    <td>
      <div title="Hello">Hello</div>
    </td>
    <td>
      <div title="-">-</div>
    </td>
    <td>
      <a title="http://dummy/url/that/is/really/really_really_really_long_where_wrap_will_fail" href="dummy">http://dummy/url/that/is/really/really_really_really_long_where_wrap_will_fail
      </a>
    </td>
    <td>
      <div title="World">World</div>
    </td>
  </tr>
</table>

CSS

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

td a {
  display: block;
  max-height: 1.1em;
  overflow: hidden;
  position: relative;
  color: transparent;
  word-break: break-all;
}

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

td a:hover:after{
  text-decoration: underline;
}