【CSS】パンくずリストが長くなった時の対処方法【スマホ用】

パンくずリストが長くなった時に、二行にせずに一行のまま表示したい時はありませんか（主にスマホで）？

今回は、長くなったパンくずリストを、CSSで一行のまま表示する方法をお伝えしたいと思います。

DEMOはこちら

実装方法

以下のHTMLとCSSを用意します。

HTML

<nav>
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      <a itemprop="item" href="ホームのURL">
        <i class="fa fa-home"></i>
        <span itemprop="name">ホーム</span>
      </a>
      <i class="fa fa-angle-right"></i>
      <meta itemprop="position" content="1" />
    </li>
    <li itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      <a itemprop="item" href="カテゴリーのURL">
        <span itemprop="name">カテゴリー名1</span>
      </a>
      <i class="fa fa-angle-right"></i>
      <meta itemprop="position" content="2" />
    </li>
    <li itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      <a itemprop="item" href="子カテゴリーのURL">
        <span itemprop="name">子カテゴリー名1</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

CSS

.breadcrumb {
  max-width: 320px;
  margin: 0 auto!important;
  padding: 20px!important;
  list-style: none;
  font-size: 0;
  background: #fff;
  white-space: nowrap;
  overflow: auto;
}

.breadcrumb li {
  display: inline-block;
  padding-bottom: 0px;
  font-size: 17px!important;
  font-weight: bold;
}

.breadcrumb li a {
  padding: 0 10px;
  text-decoration: none;
}

.breadcrumb li:first-child a {
  padding: 0 10px 0 0;
}

.breadcrumb .fa-home {
    padding-right: 4px;
    color: #8fc6dc;
}

.breadcrumb li a:hover {
    text-decoration: none;
}

CSSの詳細

white-space

初期値のnormalだと、ボックスサイズが指定されている場合、それに合わせて自動改行します。

nowrapを指定することで、自動改行されなくなります。

overflow

初期値のvisibleだと、ボックスに収まらない場合、ボックスからはみ出して表示されます。

autoを指定することで、スクロールバーなどが表示されます（ユーザーエージェントに依存）。

まとめ

パンくずリストは二行表示でも特に問題がないので、あまり需要はないかもしれませんが、必要になった時は是非参考にしてください。