3

这开始让我发疯，任何帮助表示赞赏！

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

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

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/

4

2 回答 2

3

终于让它工作了......解决方案是（不需要更改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;
}
于 2013-05-05T21:39:37.847 回答
0

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

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

ps

使用 float 和更简单的 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/

于 2013-05-05T14:23:45.013 回答