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

user_11795234 0
Viewed 478

To be more descriptive on my issue, when the depth of the tree in my inventory system exceeds the X size of the screen, the breadcrumbs are cut off. I am fine with this behavior, although I want this to be truncated to only leave the deepest parts of the tree viewable, not the least deep.

If I have 20 items, and the screen can only show 10, I want to show the last 10 instead of the first 10.

If I have these breadcrumbs: {hello > breadcrumbs > example > foobar > this > is > getting > full} and it cuts off at foobar, I want it to show as many as it can going from the right backwards, which might be:

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

Thank you in advance.

materialize breadcrumbs truncate css html
1 Answers

One way to do it is using a mix of direction:rtl, overflow:hidden & whitespace:nowrap, and a bit of the materialize grid:

 <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>

I've added in a .row to the nav-wrapper - this allows us to use the grid system. We need this to bring the breadcrumbs back to the left hand side of the page, because by setting direction:rtl, while we shift the content so that the right hand side is always visible, it is also right aligned.

The CSS:

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

.breadcrumb:before {
    display: inline; 
}

This hides any breadcrumbs that spill outside of the col.

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

user_58583950
Related