title: HTML: as table gets narrower, text-overflow should cut off more and more text
body: <p>I have a web page that has an HTML table generated by an ASP.NET control.  The top row of the table emulates a toolbar.  That top row is laid out sort of like this:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td style="white-space:nowrap;"&gt;
      &lt;span&gt;Very long title&lt;/span&gt;&amp;nbsp;
    &lt;/td&gt;
    &lt;td&gt;
      { bunch of hyperlinks with background images, emulating a toolbar }
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I am stuck with the fact that this is a table, with the contents of the title area being put in a span, and probably with that inline style specifying no wrapping.  </p>
  
  <p>This table is supposed to narrow itself when the page narrows, and it does that pretty well.  However, if the actual title text (which can vary) is too long, it effectively serves as a limit on how narrow the table can get, which can lead to overlapping with other things on the page.  (I'm using IE8, BTW.)</p>
  
  <p>I tried applying <code>overflow:hidden</code>, <code>text-overflow:ellipsis</code>, and <code>display: inline-block</code> to the span and adding a width value for the table cell, all through a stylesheet.  (<code>Display:block</code> on the span doubled the height of the row, which I didn't want, so <code>inline-block</code> was my choice.)  The title text appeared truncated, just as I wanted.  But the table wouldn't get any narrower. </p>
  
  <p>After messing around changing values and styles through IEDT I concluded that, when figuring out how narrow the table could get, the text was still counted as being its full length.  The span was relatively short, only the text that appeared in the span appeared, but for <code>table-cell</code> width purposes, the text was still all there. </p>
  
  <p>I didn't find this phenomenon documented anywhere, but maybe I just don't get around enough.  :)  If <code>text-overflow</code> can't help me, I guess I'll have to dynamically truncate the title through script, which I'd rather not do.  Is there a way to do what I want solely through CSS?</p>