CSS オーバーフロー

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

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

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

• overflow
• overflow-block
• overflow-inline
• overflow-x
• overflow-y
• text-overflow
• block-overflow Experimental
• line-clamp Experimental
• max-lines Experimental
• continue Experimental

• -webkit-line-clamp Non-standard

• スクロールバーの外見を制御する scrollbar-width および scrollbar-color プロパティ
• スクロール可能なオーバーフローのデバッグの方法