.text-truncate is designed to work only on elements with display: block or inline-block properties. However, the .breadcrumb class in Bootstrap uses flex. For more information, refer to: Text truncation
One possible solution is to modify your ol.breadcrumb element to have a display property of block by utilizing the Bootstrap class .d-block, then applying the .text-truncate class to it. Additionally, apply a display: inline-block style to all li elements using the .d-inline-block class.
<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>
In addition to the above solution, here's a creative suggestion for you to consider:
/*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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d3f3232292e292f3c2d1d68736d736c">[email protected]</a>/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>