overflowプロパティの使用例

包含ブロックに対してブロック幅が大き過ぎる場合

以下のボックスは何れも,子供ボックスを width:23em に, 包含ブロックを width:12em に設定しています。

overflow: visible;

包含ブロックに対して当該ボックスの width が大き過ぎるので外側に溢れ出してしまいます。

overflow: auto;

包含ブロックに対して当該ボックスの width が大き過ぎるので外側に溢れ出してしまいます。

overflow: hidden;

包含ブロックに対して当該ボックスの width が大き過ぎるので外側に溢れ出してしまいます。

overflow: scroll;

包含ブロックに対して当該ボックスの width が大き過ぎるので外側に溢れ出してしまいます。

包含ブロックに明示された高さを越える場合

以下のボックスは何れも,子供ボックスを height:5em に, 包含ブロックを width:16em;height:3em に設定しています。

overflow: visible;

包含ブロックの高さが内容量によってではなく heightプロパティによって与えられる場合,外側に内容が溢れ出すことがあります。

overflow: auto;

包含ブロックの高さが内容量によってではなく heightプロパティによって与えられる場合,外側に内容が溢れ出すことがあります。

overflow: hidden;

包含ブロックの高さが内容量によってではなく heightプロパティによって与えられる場合,外側に内容が溢れ出すことがあります。

overflow: scroll;

包含ブロックの高さが内容量によってではなく heightプロパティによって与えられる場合,外側に内容が溢れ出すことがあります。

折返すことができない場合

以下のボックスは何れも white-space:pre;width:15em に設定しています。

overflow: visible;

pre要素でマーク付けしているので自動的に折返されません。
行ボックス内のテキストが長すぎて外側に溢れ出てしまいます。

overflow: auto;

pre要素でマーク付けしているので自動的に折返されません。
行ボックス内のテキストが長すぎて外側に溢れ出てしまいます。

overflow: hidden;

pre要素でマーク付けしているので自動的に折返されません。
行ボックス内のテキストが長すぎて外側に溢れ出てしまいます。

overflow: scroll;

pre要素でマーク付けしているので自動的に折返されません。
行ボックス内のテキストが長すぎて外側に溢れ出てしまいます。

heightの指定よりも内容量が大きい場合

以下のボックスは何れも width:10em;height:3em に設定しています。

overflow: visible;

height で指定された高さよりも内容量が大きい場合,内容領域の外側に溢れ出してしまいます。

overflow: auto;

height で指定された高さよりも内容量が大きい場合,内容領域の外側に溢れ出してしまいます。

overflow: hidden;

height で指定された高さよりも内容量が大きい場合,内容領域の外側に溢れ出してしまいます。

overflow: scroll;

height で指定された高さよりも内容量が大きい場合,内容領域の外側に溢れ出してしまいます。

負のマージンを持つ場合

以下のボックスは何れも,子供ボックスを margin-right:-7em に設定しています。

overflow: visible;

負のマージンを持つボックス

overflow: auto;

負のマージンを持つボックス

overflow: hidden;

負のマージンを持つボックス

overflow: scroll;

負のマージンを持つボックス

負のインデントを持つ場合

以下のボックスは何れも text-indent:-4em に設定しています。

widthを明示しない(width: auto

overflow: visible;

負のインデントを持つボックス。
負のインデントによって外側に溢れ出した内容を表示するか否かはoverflowプロパティの値に左右される。

overflow: hidden;

負のインデントを持つボックス。
負のインデントによって外側に溢れ出した内容を表示するか否かはoverflowプロパティの値に左右される。

overflow: auto;

負のインデントを持つボックス。
負のインデントによって外側に溢れ出した内容を表示するか否かはoverflowプロパティの値に左右される。

widthを明示する(width: 80%

overflow: visible;

負のインデントを持つボックス。
負のインデントによって外側に溢れ出した内容を表示するか否かはoverflowプロパティの値に左右される。

overflow: hidden;

負のインデントを持つボックス。
負のインデントによって外側に溢れ出した内容を表示するか否かはoverflowプロパティの値に左右される。

overflow: auto;

負のインデントを持つボックス。
負のインデントによって外側に溢れ出した内容を表示するか否かはoverflowプロパティの値に左右される。