overflow プロパティ

プロパティ overflow は、ブロックの境界（幅または高さ）からはみ出したコンテンツ（テキスト、画像、他のブロック）をブラウザがどのように処理するかを指定します。ブラウザは、はみ出した部分を隠したり、スクロールバーを追加したり、何もしなかったり（そのままにはみ出した状態にしたり）することができます。

構文

cssセレクタ {
  overflow: hidden | scroll | auto | visible;
}

値

デフォルト値: visible。

例 . visible 値

この例では、非常に長い単語がコンテナに収まらず、境界からはみ出します。切り取られは起こりません：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: visible;
  border: 1px solid red;
  width: 200px;
}

Результат:

例 . visible 値

今度は幅だけでなく高さも制限されています（テキストはブロックから高さ方向にもはみ出します）：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  height: 40px;
  overflow: visible;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

例 . hidden 値

今回は、コンテナの境界からはみ出した部分がすべて単純に切り取られます（高さ方向も同様）。高さの切り取りは、明示的に高さが指定されている場合にのみ起こることに注意してください。そうでない場合、テキストはコンテナの高さを拡張するため、切り取りは起こりません：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: hidden;
  width: 200px;
  height: 40px;
  border: 1px solid red;
}

Результат:

例 . scroll 値

scroll 値では、スクロールバーは常に表示されます。何もはみ出していない場合でもです（その場合は非アクティブになります）。現在、テキストは幅も高さもはみ出していませんが、それでもスクロールバーはあります（非アクティブ）：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: scroll;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

例 . auto 値

auto 値では、スクロールバーはコンテンツがコンテナからはみ出した場合にのみ追加されます。現在はすべて収まっているため、スクロールバーはありません：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  overflow: auto;
  width: 400px;
  height: 100px;
  border: 1px solid red;
}

Результат:

例 . auto 値

今度は幅を制限すると、水平スクロールバーが現れます：

html<div id="elem">
  Lorem ipsum dolor sit amet
  loooooooooooooooooooooooooooooooongword,
  consectetur adipiscing elit.
</div>

css#elem {
  width: 200px;
  overflow: auto;
  height: 100px;
  border: 1px solid red;
}

Результат:

関連項目