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

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