【CSSリファレンス】overflow

こんにちは（・∀・）

CSSプロパティをご紹介します。今回ご紹介するCSSプロパティはoverflowです。

概要

overflowプロパティを使用して要素内に内容が納まらずはみ出した場合の表示方法を指定します。

.sample {
  overflow: auto;
}

overflow-xプロパティ・overflow-yプロパティは縦横個別に指定できます。

.sample {
  overflow-x: scroll;
  overflow-y: hidden;
}

適用要素

ブロックレベル要素
置換要素を除くinline-blockの要素・th要素・td要素

指定できる値

visible

要素からはみ出して表示

hidden

要素からはみ出した部分は表示しない

scroll

スクロールバーをつけて表示

auto

ブラウザに依存

初期値

visible

サンプル

HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget tellus porttitor odio vulputate bibendum vel non nulla. Fusce non elementum nunc, in elementum dolor. Ut ante nulla, porta in felis nec, egestas tempor metus. Mauris posuere leo elit, nec rhoncus nibh fermentum id. Nam commodo rhoncus posuere. Nunc vel imperdiet eros. Vivamus laoreet leo eros, eget scelerisque quam sodales venenatis. Integer magna libero, semper ac ultricies id, interdum vel orci. Aenean euismod sapien eget maximus sagittis.
</p>

CSS

.demo {
  width: 300px;
  height: 100px;
  overflow: scroll;
}

Result