Inline-block span (inside an html td) text-ellipsis fails on long words

[Reertkeby]

My objective is to have a cell inside a HTML table with an expand button.This is the html I used:\[code\]<td> <span class='outer'> <button>+</button> <span class='inner'>Sed eu nisi sit amet</span> </span></td>\[/code\]The outer span is centered : it contains a button and some text.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.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.A demo is available at http://jsfiddle.net/omanovitsh/HYDss/54/Many thanks in advance this is turning me crazy !