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

Question

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

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

如果我有这些面包屑： {你好>面包屑>例子> foobar>这个>>>满} 它在 foobar 处切断，我希望它尽可能多地从右向后显示，这可能是：

{示例> foobar>这个>>正在>满}

提前谢谢你。

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