1

I have a breadcrumb which I need to cut / shorten the breadcrumb if it's too long with text-overflow css. I have tried and confused to make a different color link only in last breadcrumb. In my breadcrumb, max breadcrumb to show is 4.

From the code below, I success to shortened breadcrumb using text-overflow: ellipsis. Like if breadcrumb have 4 link, I using foreach to show breadcrumb that index number 2 and index number 3 is too long, I shortened them using text-overflow: ellipsis. If the breadcrumb have 3 link, I used same looping too.

I want to ask how can I make different color text / link only in the last breadcrumb like if breadcrumb have 3 link, index number 2 is have different color than others. And if breadcrumb have 4 link, index number 3 is have different color ?

Here's the html code

 <?php if (isset($breadcrumbs)): ?>
    <?php 
      $numItems = count($breadcrumbs);
      $i = 0;
      //echo $numItems;
    ?>
 <nav aria-label="breadcrumb">
     <ol class="breadcrumb">
        <?php foreach ($breadcrumbs as $breadcrumb): ?>    
             <?php if ($i == 0 || $i == 1): ?>
                  <li class="breadcrumb-item"><a href="<?= $breadcrumb['url'] ?>"><?= $breadcrumb['text'] ?></a></li>
             <?php else: ?>
                  <li class="breadcrumb-item"><a href="<?= $breadcrumb['url'] ?>"  class="last"><?= $breadcrumb['text'] ?> </a></li>
             <?php endif ?>
             <?php $i++; ?>
         <?php endforeach ?>
     </ol>
  </nav>
 <?php endif ?>

Here's the css code

 .breadcrumb {
   padding: 5px 0px;
   margin-bottom: 0px;
   background-color: #ecf0f5; 
 }
.breadcrumb-item+.breadcrumb-item::before {
   content: ">";
   font-size: 12px;
 }
.breadcrumb-item {
   font-size: 14px;
 }
.breadcrumb-item .last{
   display: inline-block;
   width: 100px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
   line-height: 10px;
}
.breadcrumb-item a{
  color: #535353;
}
.breadcrumb-item:hover > a{
  color: #1787fa
}
.mini-breadcrumb{
  display: none;
}

Thank you

Ikram Shabri
  • 557
  • 1
  • 7
  • 19

2 Answers2

4

Try this css on your .breadcrumb-item:

.breadcrumb-item:last-of-type a{
  color: grey;
}

use your desired color instead of grey.

Mudasir Zahoor
  • 894
  • 6
  • 18
1

You can also use :last-child selector.

.breadcrumb-item:last-child a {
  color: grey;
}

Just adding another link where you can find difference between type-of and child difference.

What is the difference between :first-child and :first-of-type?

Swaraj Gandhi
  • 682
  • 3
  • 15