Question

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

我希望每个<li>没有“固定”，最大宽度为150px，最小宽度为10px，但是当浏览器调整大小时，它们应缩小到修复（宽度相等）。我还希望每个非“固定”<li>中的文本都有文本溢出：省略号。

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

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喜欢”块的布局
http://www.datatables.net/“数据表”布局
http://layout.jquery-dev.net/demos/table_fixed_header.html一般布局
以及更多

P.S。

使用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/

css：如何使用文本溢出省略号创建可变列大小

2 个答案: