【CSS Modules】page-break-insideプロパティの使い方

page-break-insideプロパティは、要素の内部で改ページが発生するのを制御するためのプロパティです。このプロパティは、印刷時やPDFへの出力時など、コンテンツがページに区切られて表示される際に、特定の要素の途中でのページ分断を防ぐことを目的としています。

具体的には、ブロックレベルの要素がページの境界線にかかる場合、その要素の内部でページが区切られてしまうのを避けるようブラウザに指示するために使用されます。これにより、ひとまとまりとして表示したいコンテンツが、ページの途中で不自然に分割されてしまうことを防ぎ、ドキュメントの視認性や可読性を向上させることができます。

page-break-insideプロパティには主に二つの値があります。一つは初期値であるautoで、これは要素の内部での改ページを自動的に許可することを意味します。もう一つはavoidで、これは可能な限り要素の内部での改ページを避けるようブラウザに促します。例えば、テーブルの行やセル、または画像とそれに付随するキャプションなど、分割されると意味が通じにくくなるようなコンテンツに対してavoidを設定することで、そのまとまりを保持したまま表示させることが可能になります。

ただし、このpage-break-insideプロパティは、CSS Fragmentation Modules Level 3で定義されているbreak-insideプロパティに置き換えられ、非推奨となっています。現代のウェブ開発では、より柔軟で標準的なbreak-insideプロパティを使用することが推奨されています。将来的な互換性や最新の仕様に準拠するためにも、新規プロジェクトではbreak-insideプロパティの採用を検討することをお勧めします。

Copy
1p {
2  page-break-inside: avoid;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません