備忘録的プログラミングリファレンス

overflow-xプロパティ

 overflow-xプロパティは、エレメントの内容が横方向にはみ出る(オーバーフロー)ときの表示方法を指定するプロパティです。 そのまま、はみ出る部分を表示しない、スクロールを付けるといったことができます。

 縦方向に内容がはみ出る場合は、overflow-yプロパティ、またはoverflowプロパティを使います。

 overflow-xプロパティが機能するには、widthプロパティなどでエレメントのサイズが固定されていることが条件です。

横方向に内容がはみ出るようならスクロール表示(Exampleを参照
width: 300px;
overflow-x: scroll;

構文(Syntax)

CSS

overflow-x: visible | hidden | scroll | auto | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.overflowX;
値の設定
object.style.overflowX="visible | hidden | scroll | auto | initial | inherit";

値(Values)

Value摘要
visible初期値(default値)、エレメント領域をはみ出して表示
hiddenエレメント内に収まらない部分は表示しない
scroll内容が収まるようにスクロールバーを設定。印刷ではスクロールバーは無視されることがある
auto内容が収まるようにスクロールバーを設定、内容が収まるならスクロールバーは設定されない
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)visible
継承(Inherited)No
CSS AnimationNo

Example

 overflow-xの例です。親エレメントid="over"のサイズよりも子エレメントid="contents"のサイズを大きく指定しています。 そのために親エレメントの横にスクロールが表示されます。
 エレメントがブロックレベルエレメントであることと、widthプロパティでサイズが固定されていることが条件です。