CSS【 overflow 】 ～ はみ出し処理

overflowプロパティは、オーバーフロー（あふれた）部分の処理方法を指定します。
HTML要素にサイズ指定をした場合、コンテンツ（テキストなど）の分量が多いとはみ出てしまいます。そのはみ出た部分について、スクロール処理をするのか、はみ出た分を隠すのか等の処理を指定します。特に指定をしない場合は、はみ出たまま表示されます。
今回は、このようなoverflowプロパティについてまとめたいと思います。

目次

　１．overflowプロパティ
　２．overflow:hidden

１．overflowプロパティ

overflowプロパティの値は、次の通りです。

visible	デフォルト値 処理をしない（はみ出たまま表示）
hidden	はみ出た部分は非表示
scroll	スクロールバーを表示
auto	ブラウザの仕様に依存（必要に応じてスクロールバーを表示）

overflowプロパティの値は、継承されません。
また、overflowプロパティは、ブロックレベル要素、テーブルセル、非置換要素でdisplay: inline-blockのもの、に使用できます。
　

overflowプロパティに４つの値を指定すると、それぞれ次のように表示されます。

　
ソースは次の通りです。

（CSS）
div#sample {margin:0; padding:0}
div#sample p {
	line-height:1.4em;
	margin:0 0 3em;
	padding:0.5em;
	border:solid 1px #AAA;
	width:100%;
	height:60px;
	overflow:visible;}
div#sample p:nth-child(2) {overflow:hidden}
div#sample p:nth-child(3) {overflow:scroll}
div#sample p:nth-child(4) {overflow:auto}

（HTML）
<div id="sample">
  <p style="color:blue;">
    <b>overflow: visible</b>
    デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。デフォルト値。処理をしないのではみ出たまま表示。
  </p>

  
  <p style="color:red;">
    <b>overflow: hidden</b>
    はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。はみ出た部分は非表示。
  </p>

  <p style="color:blue;">
    <b>overflow: scroll</b>
    スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。スクロールバーを常に表示。
  </p>

  <p style="color:red;">
    <b>overflow: auto</b>
    ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。ブラウザの仕様により必要に応じてスクロールバーを表示。
  </p>
</div>

▲目次へ戻る

２．overflow:hidden

overflowプロパティにhiddenを指定すると、はみ出た部分は非表示となります。
このoverflow:hiddenは、レイアウト実現の際に色々と便利に使用できます。
　

文字ブロックの高さをそろえる

サイトのアーカイブ一覧など、各記事のタイトルや冒頭のテキストによって行数が変わると、ブロックの高さが不揃いとなってレイアウト的に見辛くなります。
そのような場合に便利に使えるのがoverflow: hiddenです。
ボックスの高さを決めて、はみ出た分はoverflow: hiddenと指定しておくと、各ボックスの高さが揃って見映えが良くなります。
　

クリッピング

overflow: hiddenで、画像などの切り抜き表示をすることができます。

この画像を切り抜いてみます。

親要素であるdiv要素を、border-radius:50%で円形にしました。
このdiv要素に、overflow: hiddenを指定しています。
　
ソースは次の通りです。

（CSS）
.sample {
	width:250px;
	height:250px;
	border-radius:50%;
	overflow:hidden;}
.sample img {
	width:auto;
	position:relative;}

（HTML）
<div class="sample">
  <img src="img/image.jpg">
</div>

　

floatのテキスト

画像等にテキストを回り込ませたい時にfloatプロパティを使いますが、テキストが画像の下に回り込んでしまう場合があります。

　
このような場合、回り込ませるテキストに、overflow: hiddenまたはoverflow: autoを指定すると次のように回り込みが解消できます。

　
ソースは次の通りです。

（CSS）
div#sample {margin:0; padding:10px; border:solid 1px #AAA;}
div#sample p {margin:0; overflow:auto;}
.smpbox {width:100px; height:100px; margin:5px 10px 10px 0; text-align:center; float:left;}

（HTML）
<div class="sample">
  <div class="smpbox"><img src="img/image.jpg" /></div>
    <p>
      overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden; overflow:hidden;
    </p>
  </div>
</div>

overflow:autoで指定していますが、overflow:hiddenでも同じです。

▲目次へ戻る