{"id":14085,"date":"2011-09-05T20:59:57","date_gmt":"2011-09-06T03:59:57","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14085"},"modified":"2022-06-13T08:15:34","modified_gmt":"2022-06-13T15:15:34","slug":"orphans","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/o\/orphans\/","title":{"rendered":"orphans"},"content":{"rendered":"\n

In typography terms, an orphan is the first line of a paragraph that is left behind on the old page while the paragraph continues on the next. The orphan<\/code> property controls the minimum number of lines of a paragraph that can be left on the old page. This property only affects paged media such as print<\/code>.<\/p>\n\n\n\n

@media print {\n  p {\n    orphans: 3;\n  }\n}<\/code><\/pre>\n\n\n\n
For example, if a paragraph can’t fit on one page in its entirety it is split wherever it is possible. In this way single lines of a paragraph can appear on page before it continues on the next page. This is usually unwanted, so many word processors require at least two lines to be left on an old page, instead of one. You can give it either a positive number (where 2 is the default) or inherit<\/code>.<\/p>\n\n\n\n
Note that the orphan<\/code> property does not generally affect non-paged media such as screen<\/code>. However, browsers supporting both orphans<\/code> and columns<\/code> will apply the intended functionality to columns as well. Also, the property only affects block-level elements.<\/p>\n\n\n\n
In short, in CSS specifically:
widows<\/code> = minimum number of lines in a paragraph split on the new<\/strong> page.
orphans<\/code> = minimum number of lines in a paragraph split on the old<\/strong> page.<\/div>\n\n\n\n
\"\"
The red lines are orphans.<\/figcaption><\/figure>\n\n\n
Other resources<\/h3>\n\n\n