段組みでのはみ出しの扱い

このガイドでは、段ボックス内部と、コンテナーに収まらないほど多くの内容がある場合の両方において、段組みがどのようにはみ出しを扱うかを見てみます。

はみ出しは、アイテムの寸法が段ボックスよりも大きな場合に発生します。例えば、段内の画像が column-width の幅、または column-count で宣言された段数に基づく段の幅よりも広い場合に発生します。

この場合、内容は段ボックスで切り取られるのではなく、次の列にはみ出します。以下の例と、ブラウザーが描画時に別な方法で処理する予定のレンダリングの画像を見てください。

画像を段ボックスに合うよう縮小したい場合は、 max-width: 100% を設定する標準的なレスポンシブ画像の解決方法で実現することができます。

印刷のような断片化メディアコンテキスト内と、ウェブページのような連続メディアコンテキスト内とで、あふれた段がどのように扱われるかです。

断片化メディアでは、1つの断片 (例えば1ページ) が段で埋まると、段は新しいページに移動し、それを段で埋めます。連続メディアでは、段はインライン方向にはみ出します。ウェブでは、これはスクロールバーが出現することを意味します。

以下の例ではこのはみ出しの挙動を紹介します。段組みコンテナーには高さが設定されており、列を生成する空間よりも多くのテキストがありますので、列がコンテナーをはみ出して作成されます。

将来の版の仕様書では、連続メディアでブロック方向に段をあふれさせることができるため、読み手は次の一連の段を見るために下スクロールすることができるので、便利になるでしょう。

ウェブでの段組みの問題の一つに、段がビューポートより高い場合、読み手は読むのに上下にスクロールしなければならなくなるので使い勝手が悪くなります。これを防ぐ一つの方法が、十分な高さがあると分かった時に段組みプロパティを適用することです。

以下の例では、 min-height クエリを使用して、段組みプロパティを適用する前に高さを検査します。

このシリーズの最後のガイドでは、段組みが断片化仕様でどのように動作するかを見て、段をまたいで内容が分割される方法を制御します。