CSS - overflow-* - とほほのWWW入門

属性名	overflow overflow-x overflow-y
値	overflow: <type>{1,2} overflow-x: <type> overflow-y: <type>
値の詳細	<type> = visible \| hidden \| scroll \| auto \| no-display \| no-content
初期値	visible
適用可能要素	ブロックレベル要素
継承	継承しない
メディア	Visual
サポート	overflow: C2 / e4 / Fx1 / Ch1 / Op4 / Sa1 overflow-x: C3 / e5 / Fx1.5 / Ch1 / Op9.5 / Sa3 overflow-y: C3 / e5 / Fx1.5 / Ch1 / Op9.5 / Sa3

コンテンツが要素の高さや横幅を超えた場合に、スクロールして表示する、表示しない、はみ出して表示するなどを指定します。

値	説明
visible	要素の領域をはみ出して、コンテンツを表示します。
hidden	要素の領域をはみ出したコンテンツは表示しません。
scroll	要素の領域をはみ出したコンテンツはスクロールで表示します。
auto	必要に応じてスクロールで表示します。
no-display	コンテンツがはみ出す場合、要素自体を表示しません。まだほとんどサポートされていません。
no-content	コンテンツがはみ出す場合、コンテンツ全体を表示しません。まだほとんどサポートされていません。

overflow: は値を 1～2個指定することができます。1個の場合は横方向、縦方向双方に適用され、2個の場合は横方向、縦方向の順で適用されます。

CSS

.sample div {
    border: 1px solid #999999;
    width: 180px;
    height: 60px;
    margin-bottom: 2em;
}
.sample-visible {
    overflow: visible;
}
.sample-hidden {
    overflow: hidden;
}
.sample-scroll {
    overflow: scroll;
}
.sample-auto {
    overflow: auto;
}
.sample-no-display {
    overflow: no-display;
}
.sample-no-content {
    overflow: no-content;
}

HTML

<div class="sample">
  <h5>visible</h5>
  <div class="sample-visible">国破れて山河在り。城春にして草木深し。時に感じては花にも涙を濺ぎ、別れを恨んでは鳥にも心を驚かす。</div>
  <h5>hidden</h5>
  <div class="sample-hidden">国破れて山河在り。城春にして草木深し。時に感じては花にも涙を濺ぎ、別れを恨んでは鳥にも心を驚かす。</div>
  <h5>scroll</h5>
  <div class="sample-scroll">国破れて山河在り。城春にして草木深し。時に感じては花にも涙を濺ぎ、別れを恨んでは鳥にも心を驚かす。</div>
  <h5>auto</h5>
  <div class="sample-auto">国破れて山河在り。城春にして草木深し。時に感じては花にも涙を濺ぎ、別れを恨んでは鳥にも心を驚かす。</div>
  <h5>no-display</h5>
  <div class="sample-no-display">国破れて山河在り。城春にして草木深し。時に感じては花にも涙を濺ぎ、別れを恨んでは鳥にも心を驚かす。</div>
  <h5>no-content</h5>
  <div class="sample-no-content">国破れて山河在り。城春にして草木深し。時に感じては花にも涙を濺ぎ、別れを恨んでは鳥にも心を驚かす。</div>
</div>

表示