サイトを制作していると、文字数に悩まされることが多々あります。文字数が想定より長くなって一定の横幅を超えた際、通常なら改行して折り返し、という表示になりますが、1行に収めたい時もありますよね。とはいえ省略はしたくない。今回は特にパンくずリストなど、横幅が長くなりがちだけど省略せず表示させたい時に使える、表示領域を超えた範囲を横スクロールにするCSSのご紹介です。
一定の横幅を超えた場合に省略して表示させたい場合はこちらの記事をご確認下さい。
表示領域を超えた範囲を調整する「overflow」
こちらはよく使用するかと思いますが、表示領域を超えた範囲の見せ方を指定するプロパティは「overflow」です。値を「hidden」とすれば超えた範囲を非表示、「scroll」とすればスクロールになる、といった動作になります。
「white-space: nowrap;」と併せて指定
「white-space: nowrap;」を指定してあげることで、折り返しせず1行に表示させる指定となります。これを上記の「overflow」と併せて指定することで、以下のような表示となります。
.scroll{
overflow: scroll;
white-space: nowrap;
}
サンプル
長文で画面幅を超えるテキストがある場合は横スクロールで確認することが出来ます。長文で画面幅を超えるテキストがある場合は横スクロールで確認することが出来ます。
以上、表示領域を超えた範囲を横スクロールにするCSSでした。
