orphans

Definition

The orphans property in CSS is used to control the minimum number of lines in a block element that must remain on the top of a new page or column. If the content of the block element is shorter than the specified number of lines, then the content will be broken across pages or columns.

Examples

Require at least 3 lines to remain on the top of a new page:

.example {
  orphans: 3;
}

Require at least 2 lines to remain on the top of a new column:

.example {
  columns: 2;
  orphans: 2;
}

Values

Best Practices

• Use orphans sparingly and only when necessary, as it can affect the readability and flow of your content.
• Consider using widows instead of orphans to control the minimum number of lines that must remain on the bottom of a page or column.
• Test the orphans property in different browsers to ensure consistent behavior.
• Use orphans in combination with other CSS properties, such as page-break-after, to control the layout of your content across pages or columns.
• Be aware that the orphans property may not be supported in some older browsers or may require vendor prefixes.

Browser Compatibility