Question

I need something like this

------------------------------
| Some text | fixed-teeeeext |
------------------------------

-----------------------------------
| Some long text | fixed-teeeeext |
------------------------------------

-----------------------------------------
| Some very long te... | fixed-teeeeext |
-----------------------------------------
|<-         a        ->|<-     b      ->|
|<-                 c                 ->|

This is all for a single line of text. The right column (b) is fixed-width and the entire block (c) has a max width. The left column (a) should be minimal but if there’s not enough space in c-b there should be ellipsis.

I tried with an old-fashioned table and with various CSS two-column layouts but I’m stuck.

Update

This works in FF but not in IE9:

<table style="font-family: sans-serif;">
  <tr>
    <td style="max-width: 307px; 
               overflow: hidden; 
               text-overflow: ellipsis; 
               white-space: nowrap; 
               display:block; 
               font-weight: bold;">Lorem ipsum dolor sit amet, consectetur </td>
    <td style="width: 123px; color: #545556; font-size: 15px;">ST.2012.10.17.006</td>
  </tr>
</table>

Update II

I consolidated all the findings here: http://frightanic.com/web-authoring/ellipsis-in-table-columns/

Answer 1

Try the old table structure: 1 row with 2 cells, 2nd cell having a fixed width.
For the 1st cell, add the following CSS:

.longTd {
border: 1px solid black;
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display:block;
}

display:block is the crucial bit of code here.

Edit for IE9 compatibility, instead of the table structure, use inline-block Div elements:

.longDiv{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:inline-block;
max-width:200px;
}
.shortDiv{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
display:inline-block;
width:100px;
}

Then the HTML:

<div class="longDiv">
Lorem ipsum dolor sit amet, consectetur blah di blah
</div>
<div class="shortDiv">
Not much text here
</div>

The inline-block keeps both Div’s in the same line.