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

Question

My objective is to have a cell inside a HTML table with an expand button.

This is the html I used:

<td>
  <span class='outer'>
    <button>+</button>
    <span class='inner'>Sed eu nisi sit amet</span>
  </span>
</td>

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/

Answer 1

Try something like:

.table2 .inner {
    text-overflow: ellipsis;
    max-width: 2em;
    white-space: nowrap;
}

The max-width (or just use width if you prefer) forces the overflow to kick in.

Answer 2

First, generally you want to avoid putting block level elements in inline elements and this is one such case. See here:

http://www.w3.org/TR/REC-html40/struct/global.html#block-inline

Note that: "Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements."

With regards to the CSS, you would say:

.table2 p
{
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
    width: 100%;
}

With regards to the HTML, you need to change the spans to divs:

<td>
    <div class='outer'>
        <button>+</button>
        <div class='inner'><p>Sed eu nisi sit ametametamet</p></div>
    </div>
</td>

Otherwise, setting width to 100% for the p element will be unable to fit its width into its parent element since the parent element is a span which is an inline element.

Thank you.

Please see here: http://jsfiddle.net/VivekVish/HYDss/76/