Javascript 无固定宽度的省略号

我正在尝试这样做：

我有三个没有固定宽度的div。左侧（红色）和右侧（蓝色）区域的宽度应与其内容（图像）完全相同。左右区域可以有不同的宽度

中间的div将有一些文本，这些文本可以比div大，并且应该有一个省略号

困难在于我不知道任何宽度，我希望避免使用javascript。

HTML:

<div style="width:600px;"> <!-- 600px or the total desired width of the table -->
    <div class="column" style="border-color:red;">
        <img src="http://i.imgur.com/w57Lk.png" />
    </div>
    <div class="column" style="width:100px;">
        lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, 
        lorem ipsum dolor sit amet, lorem ipsum dolor sit amet
    </div>
    <div class="column" style="border-color:blue;">
        <img src="http://i.imgur.com/aPlq6.png" />
    </div>
</div>

​.column {
    text-overflow: ellipsis;
    height:400px; /* or whatever */
    float:left;
    border:1px solid black;
    overflow:hidden;
    white-space: nowrap; 
}​

这将使用CSS3，因此它的浏览器支持可能有限

---

编辑： 如果您不知道中间列的所需宽度，我不知道在没有至少一些JavaScript的情况下如何实现这一点。幸运的是，JS应该非常简单。使用jQuery，并且在上面的HTML中不包含

style=“width:100px；”

部分：

(function($) {
    var containerWidth = $('.column').parent().width()                         
        - $('.column:first').width() 
        - $('.column:last').width()
        - 6; //6 because the borders add 1px per side, per column
    $('.column:nth-child(2)').width(containerWidth);
})(jQuery);​

---

JSFIDLE上的工作演示：

到目前为止，省略号（使用css）只能放在一行测试中，因为您需要使用

空白：nowrap

，否则它将无法工作。具体来说，如果文本比容器宽，您希望用省略号替换溢出？谢谢您的帮助，我希望在演示中避免使用javascript，但谢谢。