How can I truncate text in a div or cell as the browser resizes

Question

I have a row consisting of icon/text/timestamp in the header section of my HTML page. I want to have the icon and the timestamp of this row remain at a fixed width, and when the browser resizes, I want to reduce the size of the text div (table-cell) by having an ellipsis appear. While I can get the ellipsis to appear with a fixed width, I want the width of the text div (table-cell) to be 100% until the browser gets smaller, then I want this text div to get smaller and for the ellipsis to appear as this div shrinks.

I could solve this problem with media queries, or a directive to resize dynamically, but I was hoping that HTML/CSS could solve it.

Is this possible?

Here is a sample: http://jsfiddle.net/em83B/

<div style="display: table; table-layout: fixed;">
    <div style="display: table-cell; background: pink; min-width: 60px;">
        AAA
    </div>

    <div style="display: table-cell; background: yellow; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; min-width: 300px; max-width: 600px;">
        This is the text I want to have truncated as the browser resizes
    </div>

    <div style="display: table-cell; background: lightblue; min-width: 100px;">
        CCC
    </div>
</div>

Answer 1

text-overflow: ellipsis works only when you've also set white-space: nowrap