table-layout:fixed use text-overflow:ellipse and a second text showing

Question

I am quite new to css, and i was searching already for hours for a solution to this problem. I have a fixed layout table in a resizable container. i have a resizing column, that has 2 texts, the first should do a text-overflow:ellipse while the second should always show (if possible). The requirement is to not show all the text in a table cell if it doesnt fit, but display the last 5 letters. I figured ill put 2 spans in a td, and give a width to the second, but the width is ignored. When i tried to float the element (i can only float left, cause floating right will put the last 5 letters to the end on an long column with little text, which is not ok), left, but then the first div is not getting smaller so the text-overflow:ellipse is not applied.

E.g i need when td is short:

|Hello budd...ight?|

and

|Hello buddy ho...ight?|

but when td is long:

|Hello buddy how is it going tonight?                       |

This seems to be a fairly common requirement, so how can i achieve it? I do not want any javascript, im quite sure it can be solved by css, and maybe some extra divs...

my html:

<table style="table-layout:fixed">
<colgroup>
    <col/>
    <col width="200px"/>
</colgroup>
<tr>
    <td>
        <span class="first">Hello buddy how is it going ton</span>
        <span class="second">ight?</span>
    </td>
    <td></td>
</tr>
</table>

my css:

table
{
     width: 90%;
     margin: 10px;   
}

tr
{
    height: 100px;
}
td
{
    width: 50%;   
    border: 1px solid blue;
    padding: 5px;
    height: 100px;
    vertical-align: top;
    position: relative;
    while-space:nowrap;
}

span.first {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  border: 1px solid red;   

}
span.second
{
    border: 1px solid green;
}

Any ideas how to achieve this? Any help is very appreciated. Thanks

Answer 1

Looks like I was able to get something working... here's the changed CSS:

span.first {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
/* --- everything below this line is new --- */
    float: left;
    padding-right: 5ex;
    max-width: 100%;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
span.second
{
    width: 4ex;
    margin-left: -5ex;
    display: inline-block;
}​

Compatible in:
I have not tested Opera or IE<9 (although I can pretty much guarantee that IE7 won't run it, because the MDN states that IE introduced box-sizing with IE8)

---

Explanation:

.first

float: left; lets both spans use the same line when combined with display: inline-block;
padding-right: 5ex; makes room for the last five characters (works with MOST fonts)
max-width: 100%; lets the first span grow up to (but not beyond) the width of the TD
display: inline-block; needed to use max-width effectively
box-sizing: border-box; puts padding inside content area (max-width) use prefixes because Firefox doesn't support the non-prefixed variant yet.

.second

width: 4ex; because it gets screwy if you use 5ex with the below
margin-left: -5ex; makes .second sidle up to the edge of the text area for .first

Note: You can change the ex values to suit your needs, but make sure both
margin-left== -(padding-right)
width<=padding-right- 0.5