title: CSS solution for dynamic number of columns in a single row
body: <p>i've been struggling all day with this... </p>
  
  <p>i'm try to skin an existing control with CSS, for reasons of product QA, i dont want to edit the code that generates the tabs.</p>
  
  <p>the control is a tabs control that is dynamically generated HTML... </p>
  
  <p>i want all the tabs in a single row... which is fine... but when it reaches the edge of the container... i want all the child tabs to squash up and hide or ellipsis any text over flow.</p>
  
  <p>what i've got - </p>
  
  <pre><code>----------------------------------------
  |tab1       |tab2       |tab        |tab   &lt;-  container edge with tab 4 hidden.
  </code></pre>
  
  <p>what i want - </p>
  
  <pre><code>|tab1    |tab2   |tab 3  |tab 4  |tab x |
  </code></pre>
  
  <p>or -</p>
  
  <pre><code>|ta...|ta...|ta...|ta...|ta...|ta...|ta...          you get the idea...?
  </code></pre>
  
  <p>the html is spans in a div... like snakes on a plane... </p>
  
  <pre><code>&lt;div&gt;
     &lt;span&gt;tab1&lt;/span&gt;
     &lt;span&gt;tab2&lt;/span&gt;
           ...
     &lt;span&gt;tabx&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>any hope?</p>
  
  <p>thanks</p>
  
  <p>edit: gotta work in IE7 :'(</p>