ボックスに収まらない内容の表示方法を指定する

overflow

{ overflow 【 オーバーフロー 】 : 表示方法; }

overflowプロパティは、ボックスに収まらない内容の表示方法を指定します。

初期値 visible
継承 なし
適用される要素 非置換のブロックレベル要素と非置換のインラインブロック要素
モジュール CSS basic box model

値の指定方法

表示方法

値は半角スペースで区切って2つまで指定でき、1つ目は水平方向、2つ目は垂直方向に適用されます。1つだけ指定した場合は、水平・垂直方向に同じ値を指定したものと見なされます。

auto ブラウザーの設定に依存します。通常はスクロールバーが表示されます。
visible 内容はボックスからはみ出して表示されます。
hidden ボックスに収まらない内容は表示されません。
scroll ボックスに収まるかどうかに関わらず、スクロールバーが表示されます。

サンプルコード

.box{
  width: 400px; height: 50px;
  border: solid 1px black;
  overflow: auto;
}

関連記事