javascript - 面包屑的动态宽度

Question

我有点卡在这里，我正在寻找一些想法。我有一个面包屑系统，它使用 :before 和 :after 标记作为箭头。

所有面包屑放在一起的最大宽度是 735px，因为这是容器元素的大小。

现在；我需要限制每个面包屑的长度以防止它们溢出并确保它们都保持在一行上。为此，我需要在面包屑上设置最大宽度。然而，max-width 将取决于当前可见的面包屑的数量。

我知道最简单的方法是计算存在的面包屑数量，并通过将容器宽度除以面包屑数量来设置固定位置，但这不是 what I want - 这意味着标题较短的面包屑导航有很大的差距，如下所示。

所以我需要指定一个 max-width，但是 max-width 将取决于其他面包屑的宽度。

例如，如果所有面包屑都有一个相当长的标题，max-width 将需要足够小以允许所有面包屑都适合容器。

但是，如果有五个面包屑的标题很短(即 4 个字符)而第五个面包屑的标题较长，我希望 max-width 允许所有文本要显示的最后一个面包屑，但仍然确保面包屑仍然适合容器。

抱歉，如果这太困惑了。这是我的面包屑的 jsFiddle，因此您可以了解它们的结构。如果您需要更多信息，请告诉我。

http://jsfiddle.net/5CLYt/

jsFiddle 中的第二个示例显示了 max-width 需要如何依赖于其他面包屑的宽度，而不仅仅是显示的面包屑的数量。

Answer 1

除了@JAYBEkster 的回答，您还可以考虑使用 flexbox。这是一个很好的资源:http://css-tricks.com/snippets/css/a-guide-to-flexbox/

我已经更新了你的文件:http://jsfiddle.net/NicoO/5CLYt/1/

/*

COPIED FROM: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

*/

#container {
    display: flex;
    justify-content: space-around;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

我知道这不是您想要的，因为元素之间的空间正在增长，而不是元素本身。但也许这是正确的方向。

也许会更新这个问题。

更新 2:flexbox 很棒。它适用于 firefox:http://jsfiddle.net/NicoO/5CLYt/3/

您需要做的就是:

.breadcrumbButton
{
    flex: 1 1 auto;
}