CSS オーバーフロー

CSS オーバーフローモジュールは、視覚メディアにおけるスクロール可能なオーバーフローの処理に関連した CSS の機能を含んでいます。 CSS では、ボックスの内容がボックスの辺の 1 つ以上を越えてはみ出した場合にオーバーフローが発生します。

インクオーバーフローとスクロール可能なオーバーフロー

CSS で遭遇する可能性のあるオーバーフローには、2 つの種類があります。 1 つ目はインクオーバーフローと呼んでいます。これは、ボックスシャドウ、境界画像、テキスト装飾、張り出した文字、アウトラインなど、レイアウトに影響を与えない、あるいはスクロール可能なオーバーフロー領域を拡張しない描画効果のオーバーフローです。

CSS で時に管理しなければならないオーバーフローをスクロール可能なオーバーフローと呼んでいます。これは、ボックスの外に現れるコンテンツで、スクロール機構を提供する必要があります。オーバーフローのプロパティは、コンテンツがボックスからオーバーフローしたときに何が起こるかを制御する方法です。

基本的な例

次のインタラクティブなデモでは、 overflow プロパティの値を変更すると、高さが固定されているボックスのオーバーフローの処理方法がどのように変わるかを示しています。

試してみましょう

リファレンス

CSS プロパティ

標準外のプロパティ

-webkit-line-clamp Non-Standard

仕様書

仕様書	状態	備考
CSS Overflow Module Level 3 overflow の定義	草案	構文を 1 つだけでなく 1 つまたは 2 つのキーワードに変更した
CSS Level 2 (Revision 1) overflow の定義	勧告	初回定義