【overflow-x】横方向のはみ出た部分の表示方法を設定

overflow-xプロパティでは、ボックスから内容がはみ出してしまう場合に、どのように表示するか設定することができます。

指定する値によってはみ出た部分の表示方法を指定することができ、内容をボックスからはみ出して表示、または非表示にしたり、スクロールして内容を表示したりする事が可能です。

またoverflow-xは横方向だけの設定となりますが、縦方向だけを指定したい場合はoverflow-yを使用します。 効果はoverflowとほぼ同じですが、overflow-xは横方向のはみ出た部分の処理方法となりますので注意して下さい。

※縦方向・横方向についてまとめて指定したい場合はoverflowプロパティを使用します。

なおoverflow-xはInternet Explorer(IE)が独自に拡張したプロパティでしたが、CSS3ではサポートされています。

書式

  • overflow-x : ……… 横方向のはみ出た内容の表示方法を指定

★:visible、hidden、scroll、auto

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

使用した時の例

.sample1 {overflow-x: visible;}
.sample2 {overflow-x: hidden;}
.sample3 {overflow-x: scroll;}
.sample4 {overflow-x: 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 値の継承 継承しない
適用可能な要素 置換要素以外のブロックレベル要素、inline-blockの要素
メディア visual
対応ブラウザ Internet Explorer5~(css2の場合)

関連情報