twitter-bootstrap - 防止在 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 中，面包屑项是向左浮动的 block 。

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

Answer 1

当使用官方面包屑片段(带有 <ol> 和 <li> 标签)时，Michael 的解决方案似乎不再适用于 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>