Force breadcrumbs to stay on one line with text truncation with Bootstrap 5

user_881559 0
Viewed 998

Bootstrap 5 docs suggest the following code for breadcrumbs:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

In another section, they recommend using the .text-truncate class to auto truncate text with ellipsis, but unfortunately, this doesn't seem to work when applied to breadcrumbs. Is there a way to achieve one line breadcrumbs in BS5?

bootstrap-5 css
2 Answers

.text-truncate only works on display: block or inline-block elements, and .breadcrumb uses flex, see: Text truncation

A solution would be setting your ol.breadcrumb element to display block by using the bootstrap .d-block class and applying the .text-truncate class to it, and finaly applying a display: inline-block to all li's using the class .d-inline-block.

<nav aria-label="breadcrumb">
 <ol class="breadcrumb d-block text-truncate">
  <li class="breadcrumb-item d-inline-block"><a href="#">Home</a></li>
  <li class="breadcrumb-item d-inline-block"><a href="#">Child 1 Page Name</a> </li>
  <li class="breadcrumb-item d-inline-block"><a href="#">Child 2 Page Name</a></li>
  <li class="breadcrumb-item d-inline-block"><a href="#">Child 3 Page Name</a></li>
  <li class="breadcrumb-item d-inline-block active" aria-current="page">Data of a long named page</li>
 </ol>
</nav>

I've also write a suggestion just for fun... :)

/*JUST A SUGGESTION*/
.sugg ol.breadcrumb {
  flex-wrap: unset;
  white-space: nowrap;
}

.sugg ol.breadcrumb > li:not(:first-child):not(:last-child){
  overflow: hidden;
  text-overflow: ellipsis;
}
/* breakdown to hide it on small devices */
@media (max-width: 576px) { 
  .sugg ol.breadcrumb > li:not(:first-child):not(:last-child){
    visibility: hidden;
    width: 0;
    padding: 0;
    
  }
  .sugg ol.breadcrumb > li:last-child:before {
    content: var(--bs-breadcrumb-divider, "/ ... /");
  }
   .sugg ol.breadcrumb > li:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

Solution
<nav aria-label="breadcrumb">
  <ol class="breadcrumb d-block text-truncate">
    <li class="breadcrumb-item d-inline-block"><a href="#">Home</a></li>
    <li class="breadcrumb-item d-inline-block"><a href="#">Child 1 Page Name</a></li>
    <li class="breadcrumb-item d-inline-block"><a href="#">Child 2 Page Name</a></li>
    <li class="breadcrumb-item d-inline-block"><a href="#">Child 3 Page Name</a></li>
    <li class="breadcrumb-item d-inline-block active" aria-current="page">Data of a long named page</li>
  </ol>
</nav>

Different Solution (suggestion)
<nav aria-label="breadcrumb" class="sugg">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Child 1 Page Name</a></li>
    <li class="breadcrumb-item"><a href="#">Child 2 Page Name</a></li>
    <li class="breadcrumb-item"><a href="#">Child 3 Page Name</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data of a long named page</li>
  </ol>
</nav>

user_35160080

Bootstrap breadcrumbs are display:flex. You can use flex-nowrap and then text-truncate on the items...

    <nav>
        <ol class="breadcrumb flex-nowrap">
            <li class="breadcrumb-item text-truncate"><a href="#">Home</a></li>
            <li class="breadcrumb-item text-truncate"><a href="#">Library</a></li>
            <li class="breadcrumb-item text-truncate"><a href="#">Longer text</a></li>
            <li class="breadcrumb-item text-truncate active" aria-current="page">Data</li>
        </ol>
    </nav>

Demo

user_1714560
Related