【overflow】はみ出た部分の表示方法を指定

overflowプロパティでは、内容がボックスからはみ出してしまう場合の表示方法を指定する事ができます。

例えば、widthプロパティやheightプロパティなどで幅と高さを指定したボックスの範囲内に内容が入りきらなく、はみ出してしまう場合などに使用されます。

はみ出した部分の表示方法は指定する値によって変わり、表示・非表示、またはスクロールで内容を表示する事などが可能です。

書式

  • overflow : ……… はみ出る部分の表示方法を指定

★:visible、hidden、scroll、auto、inherit

visible
収まりきらない内容をボックスからはみ出して表示します。IEの場合は、ボックスが内容に合わせて拡張されます。(内容ははみ出さない)
hidden
はみ出した部分を表示しません。
scroll
収まりきらない内容をスクロールして表示できるようにします。
auto
ブラウザが自動的に処理します。(一般的にはスクロールされるようになります)

使用した時の例

.sample1 {overflow: visible;}
.sample2 {overflow: hidden;}
.sample3 {overflow: scroll;}
.sample4 {overflow: auto;}
 
p {background:#EEF4FA;width:200px;height:40px;}
<p class="sample1">「visible」を指定。収まりきらない内容ははみ出して表示されます。初期値となります。</p>
<p class="sample2">「hidden」を指定。収まりきらない内容は表示されません。</p>
<p class="sample3">「scroll」を指定。入りきらない部分がスクロールして表示されるようになります。</p>
<p class="sample4">「auto」を指定。ブラウザに依存されます。基本的にはスクロールされて表示されます。</p>

ブラウザ上の表示例

「visible」を指定。収まりきらない内容ははみ出して表示されます。初期値となります。

「hidden」を指定。収まりきらない内容は表示されません。

「scroll」を指定。入りきらない部分がスクロールして表示されるようになります。

「auto」を指定。ブラウザに依存されます。基本的にはスクロールされて表示されます。

対応ブラウザなどのデータ

初期値 visible 値の継承 継承しない
適用可能な要素 table要素を除いた置換要素以外のブロックレベル要素,inline-blockの要素,th,td
メディア visual
対応ブラウザ Internet Explorer4~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~

関連情報