overflow

レイアウト・配置

要素からはみ出したコンテンツの表示方法を指定するプロパティです。

構文

Syntax

overflow: visible | hidden | scroll | auto

.box {
  width: 200px;
  height: 80px;
  overflow: visible;
}

実行結果

visible: はみ出した内容もそのまま表示されます

visible（初期値）はみ出した内容もそのまま表示されます。

.box {
  width: 200px;
  height: 80px;
  overflow: hidden;
}

実行結果

hidden: はみ出した部分は非表示です

hiddenはみ出した部分を非表示にします。スクロールもできません。

.box {
  width: 200px;
  height: 80px;
  overflow: scroll;
}

実行結果

scroll: 常にスクロールバーが表示されます

scrollは常にスクロールバーが表示されます。内容がはみ出していなくてもバーが出ます。

.box {
  width: 200px;
  height: 80px;
  overflow: auto;
}

実行結果

auto: はみ出した時だけスクロールバーが出ます

autoは必要な時だけスクロールバーが表示されます。はみ出した時だけバーが出ます。

overflow: hiddenは要素の角丸やマスキング効果にも使える。

全ブラウザ対応