CSSで枠からはみ出した要素を非表示にする方法/overflowプロパティの使い方

箱から文字がはみ出してたり、枠から漏れてたり、テキストボックスを文字が貫通してたりする、というような状況は割と頻繁に起こります。少なくともうちのサイトではよくあることなんですが、そんな時の表示方法をoverflowプロパティで指定することができます。

overflowプロパティの使い方

こういう具合の箱があったとします。この文字が枠の外側にあっても表示され続ける状態は、overflowプロパティがデフォルト値であるvisibleになっていることを意味しています。

overflowプロパティの値をhiddenに変更すると、箱の外にはみ出た文字が非表示になります。

/*CSS*/
.hide-box{
overflow:hidden;
}

他の値についても見てみましょう。

プロパティの値をscrollにすると、スクロールで非表示の部分を確認することができます。
もし横にスクロールさせたい（あるいは横に文字をはみ出させたい）場合は、white-space: nowrap;と記述して、枠の中で折り返す指定を外す必要があります。

/*CSS*/
.scroll-box{
overflow:scroll;
white-space: nowrap;
}

autoという値もありますが、ブラウザによって表示が変わるようなので、あまり使うことはなさそうです。

overflowは値をふたつ設定するとx、yそれぞれを指定することができます（またはoverflow-x、overflow-yプロパティに指定でも個別に設定が可能）。
片方をscroll、片方をhiddenにすることで、使わないスクロールバーを消すことができます。

/*CSS*/
.scroll-box{
overflow-x:hidden;
overflow-y:scroll;
}

.scroll-box{
overflow-x:scroll;
overflow-y:hidden;
white-space: nowrap;
}

CSSの便利な使い方・プロパティ逆引きリファレンス

HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

sunagitsune.com

2019.01.27