I have a breadcrumb and I would like to set last breadcrumb should cover the empty space

user_15493834 0
Viewed 182

Breadcrumb

I have a breadcrumb and I would like to set last breadcrumb should cover the empty space

max-width sets for only limited words should show, but for last breadcrumb should show until browser width.

Note: If text is big should not show full text, it should end in same line. And it should work dynamically, if breadcrumb title changed should work correctly

Is there any way to fix this using last-child?

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

ol.breadcrumb.training-breadcrumb li.breadcrumb-item {
  display: block;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
<ol class="breadcrumb training-breadcrumb">
  <li class="breadcrumb-item">HTML</li>
  <li class="breadcrumb-item">Breadcrumb Breadcrumb Breadcrumb</li>
  <li class="breadcrumb-item">High brightness and opacity</li>
  <li class="breadcrumb-item">Last breadcrumb Last breadcrumb Last breadcrumb </li>
</ol>

breadcrumbs css html
1 Answers
.breadcrumb-item:nth-last-child(1){
  max-width: 100%!important;
}

You will need to add something like this.
".breadcrumb-item:nth-last-child(1)" refers to the last element with the class "breadcrumb-item".
Usually you don't need the !important tag but somehow it didn't work without...

user_146491550
Related