title: CSS text ellipsis when using variable width divs
body: <p>I'm wondering if there is any way do have text in a floating div gain ellipsis when the parent div and neighboring div don't allow enough room.  For example:</p>
  
  <pre><code>&lt;style&gt;
  .parent-div {
      width: 100%;
      border: 1px;
      padding: 4px;
  }
  .text-div {
      float: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;    
  }
  .icon-div {
      float: left;
  }
  &lt;/style&gt;
  &lt;div class="parent-div"&gt;
    &lt;div class="text-div"&gt;This is text I'd like to truncate when space doesn't permit&lt;/div&gt;
    &lt;div class="icon-div"&gt;X&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So far if I crunch the browser window, the parent div will collapse, then the white space in text-div will vanish, but when there is no more room, the ellipsis never kick in.</p>
  
  <p>The only thing I can think to do is trigger an event when the window resizes and dynamically set a new fixed width on text-div, but this just feels inelegant, especially considering padding and other neighboring artifacts I'd have to subtract out to get a proper width.</p>
  
  <p>Any thoughts on this one?</p>
  
  <p>Here's a jsFiddle demo: <a href="http://jsfiddle.net/Blender/kXMz7/">http://jsfiddle.net/Blender/kXMz7/</a></p>