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

Question

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

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

如果我有这些面包屑： {hello > breadcrumbs > example > foobar > this > is > getting > full} 它在 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; 
}

这会隐藏溢出列外的任何面包屑

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

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

How do I truncate the beginning of breadcrumbs in materializecss when they exceed the length of the screen to only leave the final breadcrumbs?

html

css

truncate

breadcrumbs

materialize