表格布局上的自动单元格宽度已固定，但最后一个单元格

Question

我想为网站创建一个面包屑。

元素应该扩展以填充所有可用空间。如果它们不适合它，我希望将其内部文本剪裁为text-overflow: ellipsis，除了最后一个。

换句话说：让最后一个元素具有全宽，并将其他元素分配到剩余空间（宽度取决于它们的内容，或者如果不可能，至少它们不应该看起来很糟糕......）。

我尝试使用此代码。

<div>
    <ul>
        <li>paka</li>
        <li>ultrapaka</li>
        <li>ultrapaka</li>
        <li>ultrapaka ultrapaka</li>
        <li>daslidjsajdsa</li>
    </ul>
</div>

这里是CSS：

div {
    display: table;
    margin: 5px;
    border:1px solid #777;
    padding: 3px;
    table-layout:fixed;
}

ul {
    display: table-row;
}

li {
    display: table-cell;
    padding: 5px;
    border: 1px solid #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

如果我把table-layout: fixed表格确实限制了它的空间，但我失去了自动单元格宽度。

如果我没有把它放在桌子上，它就会超出限制范围。

你可以找到一个JsFiddle here。 （我已将表格宽度设置为400px以显示所需的效果，即使在最终解决方案中它应该以100％扩展）。

Answer 1

最好的方法是使用flexbox属性，但很难让它适用于所有浏览器。

您可以为所有单元格指定固定的宽度或百分比，并使用:last-child选择器在最后一个单元格上应用自动宽度。

您也可以尝试box-sizing，但我不确定结果。