使用 Bootstrap 5 强制面包屑保持在一行并截断文本

Question

Bootstrap 5 个文档建议使用以下面包屑代码：

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

在另一部分中，他们建议使用 .text-truncate class 自动截断带有省略号的文本，但不幸的是，这在应用于面包屑时似乎不起作用。有没有办法在BS5中实现一行面包屑？

Answer 1

.text-truncate 仅适用于 display: block 或 inline-block 元素，而 .breadcrumb 使用 flex，参见：Text truncation

一种解决方案是使用 bootstrap .d-block class 并应用 .text-truncate 将 ol.breadcrumb 元素设置为显示 block class，最后使用 class .d-inline-block.

对所有 li 应用 display: 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>

我也写了一个建议只是为了好玩...:)

/*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>

Answer 2

Bootstrap 面包屑导航为 display:flex。您可以在项目上使用 flex-nowrap 然后 text-truncate...

    <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

使用 Bootstrap 5 强制面包屑保持在一行并截断文本

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

css

bootstrap-5