title: How to use text-overflow:ellipsis with unknown width
body: <p>I have this <code>label</code> which might be any width and should use the CSS <code>text-overflow:ellipsis</code> property. I can't seem to be able to get it to work. <code>#a</code> works because the <code>width</code> is set and that's the expected result. How to get <code>#b</code> to work?</p>
  
  <pre><code>&lt;div id="a"&gt;
      &lt;a href="#"&gt;link&lt;/a&gt;
      &lt;input type="checkbox" /&gt;
      &lt;label&gt;checkbox label&lt;/label&gt;
  &lt;/div&gt;
  
  &lt;div id="b"&gt;
      &lt;a href="#"&gt;link&lt;/a&gt;
      &lt;input type="checkbox" /&gt;
      &lt;label&gt;checkbox label&lt;/label&gt;
  &lt;/div&gt;
  
  #a       {width:100px; background:#ddd;}
  #a label {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; float:right; width:50px;}
  #a a     {float:right}
  
  #b       {width:100px; background:#ddd;}
  #b label {text-overflow:ellipsis; overflow:hidden; white-space:nowrap; float:right;}
  #b a     {float:right}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6wusc/1/" rel="nofollow">JSFIDDLE</a></p>