overflow:要素からはみ出した内容の表示方法を指定する

適用対象 ブロックレベル要素
継承 しない

overflowプロパティは、主にブロックレベル要素の内容物が入りきらない場合に、はみ出した部分をどのように表示するかを指定する際に使用します。

InternetExplorer独自の仕様として[overflow-x]で横方向のみ、[overflow-y]で縦方向のみの指定ができますが非推奨です。また、Mac版InternetExplorerには結構致命的なバグがあるそうなので、大事な部分で使用する場合は、各ブラウザでチェックした方が良さそうです。

overflowに与えられる値

overflow: visible;
ボックスからはみ出して表示されます。これが初期値です。IEでは、ボックスの方が内容に合わせて拡張してしまいます。
overflow: scroll;
ボックスにスクロールバーが表示されます。内容が入りきらない場合は、スクロールして見られるようになります。
overflow: hidden;
はみ出した部分は表示されません。
overflow: auto;
ブラウザが自動的に判断します。殆どの場合、内容が入りきらない場合は、スクロールして見られるようになります。

overflowの使用サンプル

CSS
.text_sample01 {
 overflow: visible;
 width: 300px;
 height: 100px;
 background-color: #EEEEEE;
 margin-bottom: 20px;
}
.text_sample02 {
 overflow: scroll;
 width: 300px;
 height: 100px;
 background-color: #EEEEEE;
 margin-bottom: 20px;
}
.text_sample03 {
 overflow: hidden;
 width: 300px;
 height: 100px;
 background-color: #EEEEEE;
 margin-bottom: 20px;
}
.text_sample04 {
 overflow: auto;
 width: 300px;
 height: 100px;
 background-color: #EEEEEE;
}
XHTML
<div class="text_sample01">
text_sample01 [overflow: visible;]<br />
【1】テキストサンプル・・・(略)<br />
</div>

<div class="text_sample02">
text_sample02 [overflow: scroll;]<br />
【1】テキストサンプル・・・(略)<br />
</div>

<div class="text_sample03">
text_sample03 [overflow: hidden;]<br />
【1】テキストサンプル・・・(略)<br />
</div>

<div class="text_sample04">
text_sample04 [overflow: auto;]<br />
【1】テキストサンプル・・・(略)<br />
</div>
表示確認
text_sample01 [overflow: visible;]
【1】テキストサンプル
【2】テキストサンプル
【3】テキストサンプル
【4】テキストサンプル
【5】テキストサンプル
text_sample01 [overflow: scroll;]
【1】テキストサンプル
【2】テキストサンプル
【3】テキストサンプル
【4】テキストサンプル
【5】テキストサンプル
text_sample01 [overflow: hidden;]
【1】テキストサンプル
【2】テキストサンプル
【3】テキストサンプル
【4】テキストサンプル
【5】テキストサンプル
text_sample01 [overflow: auto;]
【1】テキストサンプル
【2】テキストサンプル
【3】テキストサンプル
【4】テキストサンプル
【5】テキストサンプル

overflowに関連するCSSプロパティ

要素の表示や配置方法
bottom 位置指定で配置された要素の底辺からの距離を指定する
break-after ボックスの終了時にページやカラムをどのように区切るかを指定する
break-before ボックスの開始前にページやカラムをどのように区切るかを指定する
break-inside ボックスの途中でページやカラムをどのように区切るかを指定する
clear フロート(float)の回り込みを解除する
clip 要素を切り抜いて可視化する範囲を指定する
box-decoration-break 要素の断片が複数の行やページに渡る場合に装飾の表示の仕方を指定する
display 要素の表示形式を指定する
float 要素を右または左へ寄せて配置する
left 位置指定で配置された要素の左辺からの距離を指定する
overflow 要素からはみ出した内容の表示方法をまとめて指定する
overflow-wrap 長い単語の折り返し方法について指定する
overflow-x 要素からはみ出した内容の水平方向の表示方法を指定する
overflow-y 要素からはみ出した内容の垂直方向の表示方法を指定する
position 要素の配置方法について相対的か絶対的にするかを指定する
right 位置指定で配置された要素の右辺からの距離を指定する
vertical-align ボックス内のインライン要素に縦位置を揃える基準を指定する
visibility 要素の領域を残したまま表示・非表示を指定する
z-index 要素の重なり順序を指定する