显示带有文本溢出的面包屑 css

Question

我有一个面包屑，如果 text-overflow css 太长，我需要剪掉/缩短面包屑。我曾尝试并混淆了只在最后一个面包屑中制作不同的颜色 link。在我的面包屑中，最大显示的面包屑是 4。

从下面的代码中，我使用 text-overflow: ellipsis 成功缩短了面包屑。就像如果面包屑有 4 link，我使用 foreach 来显示 breadcrumb 那 index number 2 和 index number 3 太长了，我使用 text-overflow: ellipsis 缩短了它们.如果面包屑有 3 link，我也使用相同的 looping。

我想问一下如何只在最后一个面包屑中制作不同颜色的文本/link，比如面包屑有 3 个 link，index number 2 的颜色与其他面包屑不同。如果面包屑有 4 个 link，index number 3 有不同的颜色 ?

这是 html 代码

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

这是 css 代码

 .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;
}

谢谢

Answer 1

在你的 .breadcrumb-item 上试试这个 css:

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

使用您想要的颜色代替 grey。

Answer 2

您也可以使用 :last-child 选择器。

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

只需添加另一个 link，您可以在其中找到 type-of 和 child 之间的区别。

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

显示带有文本溢出的面包屑 css

Show breadcrumb with text-overflow css

html

css

breadcrumbs