防止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中,breadcrumb-items是向左浮动的块.

有没有人找到解决方法而不覆盖所有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>