CSS オーバーフロー

CSS オーバーフローモジュールのプロパティを使用すると、視覚メディアでスクロール可能なオーバーフローを処理することができます。

オーバーフローは、要素ボックス内のコンテンツがボックスの 1 つまたは複数の端を越えるときに起こります。スクロール可能なオーバーフローとは、要素ボックスの外側に現れるコンテンツのことで、スクロール機構を追加したい場合があります。CSS オーバーフローのプロパティを使用すると、コンテンツが要素ボックスからあふれたときに何が起こるかを制御することができます。

コンテンツがはみ出すものの、 CSS のボックスモデルに関与しない描画効果は、レイアウトには影響しません。この種のオーバーフローはインクオーバーフローとも呼ばれます。インクオーバーフローの例としては、ボックスシャドウ、境界画像、テキスト装飾、はみ出したグリフ、輪郭線などが挙げられます。インクオーバーフローはスクロール可能なオーバーフロー領域を拡張しません。

オーバーフローの実際

次の操作可能な例を使用して、隣接する固定サイズボックスのコンテンツのオーバーフローとスクロールバーに対する様々なオーバーフロープロパティ値の効果を確認してみましょう。

この例では、overflow-clip-margin プロパティと width プロパティの値を変更するオプションも含まれています。また、overflow プロパティがスクロールコンテナーを生成する場合、コンテンツをプログラムでスクロールすることもできます。 overflow: clip を選択し、 overflow-clip-margin の値を変えた場合の効果を確認します。 overflow: hidden または overflow: scroll を選択し、様々な ScrollLeft と ScrollTop スライダーの設定を調べます。

上のコンテンツボックスにはリンクが記載されていますが、これはキーボードフォーカスがオーバーフローやスクロール動作に与える効果を示すためのものです。リンクに移動したり、コンテンツをプログラムでスクロールしてみてください: 列挙値である <overflow> がスクロールコンテナーを生成した場合のみ、コンテンツはスクロールします。

リファレンス

CSS プロパティ

メモ: CSS オーバーフローモジュールレベル 4 では、block-ellipsis、continue、line-clamp、max-lines プロパティが導入されました。これらはまだ実装されていません。

データ型

ガイド

コンテンツのオーバーフロー

CSS の構成要素です。オーバーフローとは何か、どのように管理するかを学びます。

名前付きスクロール進行タイムラインアニメーションの作成

CSS スクロールタイムライン scroll-timeline-name および scroll-timeline-axis プロパティと scroll-timeline の一括指定は、スクロールコンテナーのスクロールオフセットに関連付けられたアニメーションを作成します。

関連概念

仕様書

Specification
Unknown specification
Unknown specification

関連情報