Using text-overflow: ellipses in an HTML table

Question

I must be missing something here, but why isn't my text-overflow: ellipses rule working correctly here?

Fiddle: https://jsfiddle.net/sgj9rv5r/

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

<table border="1">
  <tr>
    <td>
      This content should shorten to ellipses after the 50px width has been reached.
    </td>
  </tr>
</table>

Answer 1

Using max-width as suggested by Michael Coker solves this problem.