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

cat IT

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

Advertisements

overflowプロパティの使い方

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

テキストテキストテキストテキストテキスト……

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

テキストテキストテキストテキストテキスト……
/*CSS*/
.hide-box{
overflow:hidden;
}
枠からはみ出した要素の扱いを決める
overflow:値

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

テキストテキストテキストテキストテキスト……

プロパティの値を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関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント