overflow

レイアウト・配置

要素からはみ出したコンテンツの表示方法を指定するプロパティです。visible、hidden、scroll、autoなどがあり、スクロール領域の制御やレイアウトの調整に使用します。overflow-xとoverflow-yで軸ごとに指定も可能です。

構文

Syntax

overflow: visible | hidden | scroll | auto

🎮

はみ出し処理

これは長いテキストです。オーバーフローの動作を確認できます。スクロールバーが表示されるか、隠れるか、はみ出すかを選択できます。

.element {
  overflow: visible;
}

.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は要素の角丸やマスキング効果にも使える。

全ブラウザ対応