没有固定宽度的省略号

Question

我正在尝试做这样的事情：

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

中心div将有一些文本可以大于div，并且应该有省略号。

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

Answer 1

<强> 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>

的 CSS：

​.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);​

关于jsFiddle的工作演示： http://jsfiddle.net/qPbfw/