overflowでボックスからはみ出た内容の表示方法を指定【CSS】

overflowは、ボックスに収まらずにはみ出た内容の表示方法を指定するプロパティです。

{overflow: 表示方法;}

値の指定方法

overflowプロパティでは、以下のような値を指定することができます。

値は半角スペースで区切って2つまで指定でき、1つ目は水平方向、2つ目は垂直方向に適用されます。

1つだけ指定した場合は、水平方向・垂直方向に同じ値を指定したものと見なされます。

autoを指定すると、ブラウザの設定に依存します。

通常はスクロールバーが表示されます。

autoを指定しています。
ボックスからはみ出た内容はブラウザの設定でどのように表示されるか自動的に決められ、通常はスクロールバーが表示されます。

visibleを指定すると、内容はボックスからはみ出して表示されます。

visibleを指定しています。
ボックスからはみ出た内容は、ボックスからはみ出しても表示されます。

hiddenを指定すると、ボックスに収まらない内容は表示されません。

hiddenを指定しています。
ボックスからはみ出た内容は、表示されません。

scrollを指定すると、ボックスに収まるかどうかに関わらず、スクロールバーが表示されます。

scrollを指定しています。
ボックスに収まるかどうか関係なく、スクロールバーが表示されます。

overflow-xやoverflow-yプロパティは、ボックスに収まらない内容の水平方向・垂直方向の表示方法をそれぞれ指定します。

{overflow-x: 表示方法;}
{overflow-y: 表示方法;}

overflow-xがプロパティ水平方向の表示方法を、overflow-yプロパティが垂直方向の表示方法を示します。