<div class="container p-4">
  <div class="row">
    <div class="col-6">
      <h3>標準</h3>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">ホーム</a></li>
        <li class="breadcrumb-item"><a href="#">bootstrapの使い方</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bootstrapのパンくずリストを1行表示にして、超過分は省略する。</li>
      </ol>
    </div>
  </div>
</div>
<div class="container p-4">
  <div class="row">
    <div class="col-6">
      <h3>1行表示</h3>
      <ol class="breadcrumb breadcrumb-ellipsis">
        <li class="breadcrumb-item"><a href="#">ホーム</a></li>
        <li class="breadcrumb-item"><a href="#">bootstrapの使い方</a></li>
        <li class="breadcrumb-item active" aria-current="page">Bootstrapのパンくずリストを1行表示にして、超過分は省略する。</li>
      </ol>
    </div>
  </div>
</div>
.breadcrumb-ellipsis{
  display: block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.breadcrumb-ellipsis .breadcrumb-item{
  display: inline;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.