overflow-x
overflow-x
は CSS のプロパティで、ブロックレベル要素のコンテンツが左右の端からあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、コンテンツをはみ出させる、のいずれかになります。このプロパティは、overflow
一括指定プロパティを使用して設定することもできます。
試してみましょう
構文
/* キーワード値 */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;
/* グローバル値 */
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: revert-layer;
overflow-x: unset;
overflow-x
プロパティは、単一の <overflow>
キーワード値で指定します。
overflow-y
が hidden
、scroll
、auto
のいずれかで、 overflow-x
プロパティが visible
(既定値)の場合、この値は暗黙的に auto
として計算されます。
値
visible
-
あふれたコンテンツは切り取られず、この要素のパディングボックスの左右の端よりも外側に表示される可能性があります。この要素ボックスはスクロールコンテナーになりません。
-
要素のパディングボックスに水平方向に合わせる必要がある場合は、コンテンツを切り取ります。スクロールバーは表示されません。
clip
-
あふれたコンテンツは、
overflow-clip-margin
プロパティを使用して定義された要素のオーバーフロークリップ枠で切り取られます。その結果、コンテンツは要素のパディングボックスからoverflow-clip-margin
の値<length>
だけはみ出します(設定されていない場合は0px
です)。clip
とhidden
の違いは、clip
キーワードはプログラムによるスクロールも含め、すべてのスクロールを禁止することです。新しい整形コンテキストは生成されません。新しい整形コンテキストを生成するのであれば、overflow: clip
と共にdisplay: flow-root
を使用してください。この要素ボックスはスクロールコンテナーにはなりません。 scroll
-
あふれたコンテンツは、水平方向にパディングボックスに合わせる必要がある場合に切り取られます。ブラウザーはコンテンツが実際に切り取られるかどうかにかかわらず、水平方向のスクロールバーを表示します。 (これで、コンテンツが変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターはあふれたコンテンツを印刷するかもしれません。
auto
-
あふれたコンテンツは要素のパディングボックスで切り取られ、あふれたコンテンツはビュー内にスクロールすることができます。
scroll
とは異なり、ユーザーエージェントはコンテンツがあふれた場合のみスクロールバーを表示し、既定では、スクロールバーを非表示にします。コンテンツが要素のパディングボックス内に収まる場合、visible
と同じように見えますが、新しいブロック整形コンテキストを確立します。デスクトップのブラウザーは、コンテンツがあふれた場合にスクロールバーを提供します。
メモ: キーワード値 overlay
は、 auto
の古い別名です。 overlay
の場合、スクロールバーは空間を占有することなく、コンテンツの上に描画されます。
公式定義
初期値 | visible |
---|---|
適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
継承 | なし |
計算値 | 指定通り、ただし overflow-x と overflow-y のどちらかが visible でも clip でもない場合は、 visible /clip はそれぞれ auto /hidden と計算される |
アニメーションの種類 | 離散値 |
形式文法
例
HTML
<ul>
<li>
<code>overflow-x:hidden</code> — ボックスの外側のテキストを隠す
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:scroll</code> — 常にスクロールバーを表示
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:visible</code> — 必要に応じてテキストをボックスの外に表示
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-x:auto</code> — 多くのブラウザーでは
<code>scroll</code> と同じ
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
CSS
#div1,
#div2,
#div3,
#div4 {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-x: hidden;
}
#div2 {
overflow-x: scroll;
}
#div3 {
overflow-x: visible;
}
#div4 {
overflow-x: auto;
}
結果
仕様書
Specification |
---|
CSS Overflow Module Level 3 # overflow-properties |
ブラウザーの互換性
BCD tables only load in the browser