Prevent new-line in Bootstrap4-apha6 breadcrumb
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>Don't float .breadcrumb-item. Set both .breadcrumb and .breadcrumb-item to white-space: nowrap;. Then add overflow: hidden; text-overflow: ellipsis; to .breadcrumb to create the ellipsis.
.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>Bootstrap 4.1.3
Apply .flex-nowrap to the .breadcrumb element, and then .text-truncate to .breadcrumb-item elements you wish to clip. This has the effect of forcing the breadcrumb container to not wrap, and then each element must fit within it, truncating text.
<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>