| 属性名 |
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個の場合は横方向、縦方向の順で適用されます。
.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;
}
<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>