【CSS】スマホのパンくずをCSSだけで改行させずに横スクロールさせる方法 | SPIQA NOTEユーザーが今どのページを見ているのかわかりやすくするためにパンくずリストを設置しているサイトが多いですが、階層が多くなるとどうしても長くなってしまいます。 そこで、今回はCSSだけで簡単にスマホのパンくずを改行させずに横スクロールで表示する方法をご紹介します。 やることは…親要素にoverflowをかけるだけ パンくずリストの親要素に対して、横方向にoverflow-xのscrollかautoを指定します。 また、テキストが改行されないようにword-break: keep-allとwhite-space: nowrap;もかけます。 下記ではレスポンシブを意識して横幅768pxからスクロールの指定をかけました。codepenの幅が狭いのでスクロールされているかと思います。 See the Pen yLMzNeE by spiqa design (@spiqa_design) on Cod
