title: Inline-block span (inside an html td) text-ellipsis fails on long words
body: <p>My objective is to have a cell inside a HTML table with an expand button.</p>
  
  <p>This is the html I used:</p>
  
  <pre><code>&lt;td&gt;
    &lt;span class='outer'&gt;
      &lt;button&gt;+&lt;/button&gt;
      &lt;span class='inner'&gt;Sed eu nisi sit amet&lt;/span&gt;
    &lt;/span&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>The outer span is centered : it contains a button and some text.</p>
  
  <p>The button position is done through absolute positioning on the left of the outer, some left-padding avoid that the text goes under the button.</p>
  
  <p>Everything is fine except when I have a word which doesn't fit inside the td. I thought an overflow:hidden + text-overflow:ellipsis would suffice, but i have a problem.</p>
  
  <p>A demo is available at <a href="http://jsfiddle.net/omanovitsh/HYDss/54/" rel="nofollow noreferrer">http://jsfiddle.net/omanovitsh/HYDss/54/</a></p>