css：如何使用文本溢出省略号来改变列大小

Question

这开始让我发疯了，感谢任何帮助！

我希望每个未“固定”的<li> 的最大宽度为 150 像素，最小宽度为 10 像素，但是当浏览器缩小时，它们应该缩小以修复（并且宽度相等）。我还希望每个非“固定”<li> 中的文本具有 text-overflow: ellipsis。

我似乎无法让这个工作，到目前为止我有：

http://jsfiddle.net/546t8/

HTML：

<ul>
    <li class="fixed">Fixed Size</li>
    <li>
        <div>
            <span>this text is very very long and it goes on and on and on and on but does not wrap</span>
        </div>
    </li>
    <li>
        <div>
            <span>short</span>
        </div>
    </li>
    <li>
        <div>
            <span>one more tab</span>
        </div>
    </li>
    <li>
        <div>
            <span>another tab</span>
        </div>
    </li>
</ul>

CSS：

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    width: 150px;

}

li > div {
     overflow: hidden;
    text-overflow: ellipsis;

}

li > div > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

更新：这显示了我对列的追求，但正如您所见，省略号并未隐藏文本：

http://jsfiddle.net/546t8/9/

更新：这越来越近了，但仍然没有省略号:-(

http://jsfiddle.net/546t8/11/

更新：已解决解决方案发布于下方。

http://jsfiddle.net/AjZDx/2/

Answer 1

终于让它工作了...解决方案是（不需要更改 html）：

http://jsfiddle.net/AjZDx/2/

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
    border-spacing: 6px 0px;
}

li {
    display: table-cell;
    background-color: red;
    min-width: 20px;
    width: 120px;
}

li.fixed {
    width: 100px;
    min-width: 100px;
    text-align: center;
}

ul > li > div {
    display: table;
    border-spacing: 0px 0px;
    table-layout: fixed;
    width: 100%;
}

ul > li > div > span {
    display: table-cell;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

Answer 2

我相信 display: table 和 display: table-cell 是一个死胡同：表格布局将始终使用显示所有内容所需的最大单元格高度（见下文） - 但您需要相反。另一方面，表格布局有利于以您描述的方式使用水平空间。

一种完全不同的方法是使用一些 javascript 库为您进行布局。有很多这样的。举个例子：

• http://masonry.desandro.com/ "pintrest like" 块布局
• http://www.datatables.net/“数据表”布局
• http://layout.jquery-dev.net/demos/table_fixed_header.html总体布局
• 还有更多

附言

使用浮动和更简单的 html，您可以获得所需的高度而不是所需的宽度：

<ul>
    <li class="fixed">Fixed Size</li>
    <li class="ellipsis">this text is very very long and it goes on and on and
on and on but does not wrap</li>
    <li>short</li>
    <li>one more tab</li>
    <li>another tab</li>
</ul>

和css

li {
    float:left;
    min-width: 10px;
}

li.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

li.fixed {
    width: 150px;
}

请参阅此小提琴以获取工作示例： http://jsfiddle.net/bjelline/TxDfc/