Definition
The orphans CSS property is used to control the minimum number of lines in a block of text that must remain together at the bottom of a page or column, preventing widowed lines. It specifies the minimum number of lines that should be left behind when a page or column break occurs.
The orphans property accepts an integer value, which represents the minimum number of lines that should remain together.
Here’s an example:
p {
orphans: 2;
}
In this example, the p elements are set to have a minimum of 2 lines remaining together. If a page or column break occurs within the paragraph, at least two lines from the bottom of the paragraph will be moved to the next page or column, ensuring that fewer “widowed” lines are left behind.
By adjusting the value of orphans, you can control how many lines should be kept together to prevent widows and maintain better readability in multi-column layouts or paginated content.
It’s worth noting that the orphans property applies only to block-level elements and may have limited browser support.