【CSS】要素の範囲を超えた部分を非表示にする(切り取る)overflow: hidden

overflow: hiddenとは

overflow: hiddenは、CSSプロパティの1つで、要素の内容がその領域を超えた場合の動作を指定するものです。

具体的には、以下のような効果があります。

要素の範囲を超えた部分は表示されなくなる(切り取られる)

スクロールバーは表示されない

要素の背景が要素の範囲に収まらない部分は表示されない

主な使用例

主な使用例としては、以下のようなケースが考えられます。

画像やテキストがコンテナからはみ出すのを防ぐ

フローティング要素がコンテナの外にはみ出すのを防ぐ

要素の高さを制限し、コンテンツがはみ出さないようにする

テキストの改行や画像の範囲外への出力を防ぐ

テキストの改行や画像の範囲外への出力を防ぐ

<div style="width: 200px; height: 100px; overflow: hidden;">

  <p>これはかなり長いテキストです。長すぎて、この範囲に収まりきらないでしょう。</p>

  <img src="large-image.jpg" alt="大きな画像" />

</div>

copy

上記の例では、divの範囲を200px x 100pxに制限し、overflow:hiddenを設定しています。テキストと画像がこの範囲を超えた部分は表示されません。

フローティング要素がコンテナからはみ出すのを防ぐ

<div style="overflow: hidden;">

  <div style="width: 100px; height: 100px; float: left; background: red;"></div>

  <p>このテキストは赤い正方形の横に表示されるはずです。</p>

</div>

上の例では、赤い正方形がフロートしています。overflow:hiddenがない場合、正方形がコンテナからはみ出してしまいます。しかし、overflow:hiddenを設定すると、正方形はコンテナ内に収まります。

スクロールバーを表示させずにコンテンツを切り取る

スクロール機能自体を無効にしてしまうと、横スクロールができなくなってしまいます。そこで、スクロールバー自体は表示させたままで、スタイル調整することをおすすめします。