javascript - 没有固定宽度的省略号

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，并且没有style="width:100px;"上面 HTML 中的部分：

(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/