Prevent new-line in Bootstrap4-apha6 breadcrumb

Question

When the text in the breadcrumbs in Bootstrap4-aplha6 is too long the las crumb will jump to the next line:

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

Produces:

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

And I would like:

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

I have tried fixing this with white-space: nowrap, overflow: hidden and text-overflow: ellipsis and it does not seem to work well because, for some reason, in Bootstrap4, the breadcrumb-items are blocks floated left.

Did anyone find the way to fix this without overwriting all the Bootstrap classes (the ellipsis is not 100% necessary)?

Answer 1

Michael's solution seems no longer work with Bootstrap 4.1 when using the official breadcrumb snippet (with <ol> and <li> tags). Here is another solution.

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