1

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

元素应扩展以填充所有可用空间。如果他们不能适应它，我希望他们的内部文本用 剪辑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 。（我已将表格宽度设置为 400px 以显示所需的效果，即使在最终解决方案中它应该以 100% 扩展）。

4

1 回答 1

2

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

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

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

于 2013-05-31T12:43:53.193 回答