orphans
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
The orphans
CSS property sets the minimum number of lines in a block container that must be shown at the bottom of a page, region, or column.
In typography, an orphan is the first line of a paragraph that appears alone at the bottom of a page. (The paragraph continues on a following page.)
Syntax
css
/* values */
orphans: 2;
orphans: 3;
/* Global values */
orphans: inherit;
orphans: initial;
orphans: revert;
orphans: revert-layer;
orphans: unset;
Values
Formal definition
Initial value | 2 |
---|---|
Applies to | block container elements |
Inherited | yes |
Computed value | as specified |
Animation type | by computed value type |
Formal syntax
Examples
Setting a minimum orphan size of three lines
HTML
html
This is the first paragraph containing some text.
This is the second paragraph containing some more text than the first one.
It is used to demonstrate how orphans work.
This is the third paragraph. It has a little bit more text than the first
one.
CSS
css
div {
background-color: #8cffa0;
height: 150px;
columns: 3;
orphans: 3;
}
p {
background-color: #8ca0ff;
}
p:first-child {
margin-top: 0;
}
Result
Specifications
Specification |
---|
CSS Fragmentation Module Level 3 # widows-orphans |