overflow-x
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.
overflow-x は CSS のプロパティで、ブロックレベル要素のコンテンツが左右の端からあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、コンテンツをはみ出させる、のいずれかになります。このプロパティは、overflow 一括指定プロパティを使用して設定することもできます。
試してみましょう
overflow-x: visible; overflow-x: hidden; overflow-x: clip; overflow-x: scroll; overflow-x: auto; <section class="default-example" id="default-example"> <div id="example-element"> The value of Pi is 3.1415926535897932384626433832795029. The value of e is 2.7182818284590452353602874713526625. </div> </section> #example-element { width: 15em; height: 9em; border: medium dotted; padding: 0.75em; text-align: left; } 構文
/* キーワード値 */ 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 |
