当materializecss中的面包屑超过屏幕长度以仅留下最终的面包屑时，如何截断它们的开头？

Question

为了更好地描述我的问题，当我的库存系统中树的深度超过屏幕的 X 大小时，面包屑被切断。我对这种行为很好，尽管我希望将其截断以仅使树的最深部分可见​​，而不是最不深的部分。

如果我有 20 个项目，而屏幕只能显示 10 个，我想显示最后 10 个而不是前 10 个。

如果我有这些面包屑： {你好 > 面包屑 > 示例 > foobar > 这个 > 是 > 获取 > 完整} 它在 foobar 处中断，我希望它从右向后显示尽可能多的内容，这可能是：

{example > foobar > this > is > getting > full}

提前谢谢你。

Answer 1

一种方法是混合使用direction:rtl、overflow:hidden 和whitespace:nowrap，以及一些物化网格：

 <nav>
    <div class="nav-wrapper container row">
        <div class="breadcrumb-wrapper col s12 m6">
          <a href="#!" class="breadcrumb"><i class="material-icons">home</i></a>
          <a href="#!" class="breadcrumb">Second</a>
          <a href="#!" class="breadcrumb">Third</a>
          <a href="#!" class="breadcrumb">Fourth</a>
          <a href="#!" class="breadcrumb">Fifth</a>
          <a href="#!" class="breadcrumb">Sixth</a>
        </div>
    </div>
  </nav>

我在导航包装器中添加了.row - 这允许我们使用网格系统。我们需要这个来将面包屑带回到页面的左侧，因为通过设置direction:rtl，当我们移动内容以使右侧始终可见时，它也是右对齐的。

CSS：

.breadcrumb-wrapper {   
    white-space: nowrap;
    overflow: hidden;
    direction: rtl;
}

.breadcrumb:before {
    display: inline; 
}

这会隐藏任何溢出到 col 之外的面包屑。

https://codepen.io/doughballs/pen/gOPGWWp