防止在 Bootstrap4-apha6 面包屑中换行

Question

当Bootstrap4-aplha6 中面包屑中的文本太长时，las crumb 将跳到下一行：

<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">Library</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">A slightly too long title</span>
</nav>

产生：

 ---------------------------------
|                                 |
| Home / Library / Data           |
|   / A slightly too long title   |
|                                 |
|                                 |
|                                 |
 \\\\\\\\\\\\\\\\\

我想：

 ---------------------------------
|                                 |
| Home / Library / Data / A slig… |
|                                 |
|                                 |
|                                 |
 \\\\\\\\\\\\\\\\\

我尝试用 white-space: nowrap、overflow: hidden 和 text-overflow: ellipsis 解决这个问题，但似乎效果不佳，因为出于某种原因，在 Bootstrap4 中，面包屑项是向左浮动的块。

有没有人找到解决这个问题而不覆盖所有 Bootstrap 类的方法（省略号不是 100% 必要的）？

Answer 1

不要浮动.breadcrumb-item。将 .breadcrumb 和 .breadcrumb-item 都设置为 white-space: nowrap;。然后将 overflow: hidden; text-overflow: ellipsis; 添加到 .breadcrumb 以创建省略号。

.breadcrumb, .breadcrumb-item {
  white-space: nowrap;
}
.breadcrumb .breadcrumb-item {
  float: none;
}
.breadcrumb {
  text-overflow: ellipsis;
  overflow: hidden;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="breadcrumb">
  <a class="breadcrumb-item" href="#">Home</a>
  <a class="breadcrumb-item" href="#">asdf asdf asdf asdf asdf asdf a asdf asdf asdf asdf sadf</a>
  <a class="breadcrumb-item" href="#">Data</a>
  <span class="breadcrumb-item active">A slightly llllllitle</span>
</nav>

Answer 2

Michael 的解决方案在使用官方面包屑片段（带有 <ol> 和 <li> 标签）时似乎不再适用于 Bootstrap 4.1。这是另一个解决方案。

.breadcrumb {
    display: block !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumb .breadcrumb-item {
    display: inline;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container">             
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item"><a href="#">My category</a></li>
                <li class="breadcrumb-item active" aria-current="page">My page</li>       
            </ol>
        </nav>        
    </div>

Answer 3

Bootstrap 4.1.3

将 .flex-nowrap 应用到 .breadcrumb 元素，然后将 .text-truncate 应用到 .breadcrumb-item 您希望剪辑的元素。这具有强制面包屑容器不换行的效果，然后每个元素都必须适合其中，截断文本。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container m-5" style="width:450px">
  <nav class="breadcrumb flex-nowrap">
    <a class="breadcrumb-item">Home</a>
    <a class="breadcrumb-item text-truncate">Library</a>
    <a class="breadcrumb-item text-truncate">Data</a>
    <a class="breadcrumb-item text-truncate">Thursday</a>
    <span class="breadcrumb-item active text-truncate">A slightly too long title</span>
  </nav>
</div>

防止在 Bootstrap4-apha6 面包屑中换行

Prevent new-line in Bootstrap4-apha6 breadcrumb

twitter-bootstrap

css

bootstrap-4

twitter-bootstrap-4