CSS

The orphans property is a CSS property that controls how many words at minimum should be left on the last line of a text block.

orphans プロパティ

　orphans（オルファン）プロパティは、印刷物のレイアウトに関するもので、特定の行に属する単語の数を制御します。このプロパティは、印刷時に行がページの下部に位置する場合に、最後の行に残された単語が、別ページにまたがることを防止します。

　orphansプロパティは、単一の整数値で指定されます。この値は、ページの下端に位置する最後の行に属する単語の最小数を指定します。例えば、値が２の場合、ページの下部に位置する最後の行に２つ未満の単語しか含まれない場合、その行は新しいページに移動します。

　以下は、orphansプロパティを使用する方法を示す例です。

p {
	orphans: 2;
}

　この例では、段落内の単語がページの下部に位置する場合、２つ未満の単語しか含まれない場合、最後の行が新しいページに移動します。

　このプロパティは、印刷物のレイアウトに特に重要ですが、Webページのレイアウトにも役立つことがあります。例えば、orphansプロパティを使用して、Webページ内のテキストブロックの垂直方向の均等化を制御することができます。

　しかし、このプロパティは、Webページのレイアウトに直接関連するわけではないため、注意して使用する必要があります。また、このプロパティは、すべてのブラウザで完全にサポートされているわけではないため、互換性についても注意が必要です。

　orphansプロパティは、印刷物のレイアウトに最適化されているため、Webページのレイアウトに使用する場合には、レスポンシブデザインとの組み合わせが必要になる場合があります。これは、orphansプロパティが、異なる画面サイズや解像度に応じて異なる効果を発揮する可能性があるためです。したがって、orphansプロパティを使用する場合は、レスポンシブデザインの原則に従って、CSSメディアクエリを使用して適切な値を設定する必要があります。

　また、orphansプロパティは、widowsプロパティと相互作用することに注意する必要があります。widowsプロパティは、行の先頭が別ページに移動するのを防ぐために使用されます。widowsプロパティが設定されている場合、orphansプロパティの値を変更することが行末の単語の数に影響を与える可能性があるため、両方のプロパティを組み合わせて使用する場合は、慎重に検討する必要がります。

Browser support