Layout
orphans
orphans sets the minimum number of lines of a paragraph to leave before a column or page break (at the bottom of the column or page). If that many lines do not fit, the whole paragraph moves to the next column or page.
Syntax
<integer>Preview
Intro 1
Intro 2
Intro 3Line 1
Line 2
Line 3
Line 4
Presets
Drag the bottom-right corner to resize
Code
.box {
column-count: 2;
column-fill: auto;
orphans: 3;
}Controls
orphans3
Intro 1
Intro 2
Intro 3Line 1
Line 2
Line 3
Line 4
About
What the values mean
- A positive integer such as
2: the number of lines to leave before the break. The initial value is2.
The preview box has two columns with column-fill: auto, so lines fill the first column first. Three gray intro lines are followed by a light blue paragraph of four lines. Two of its lines fit in the first column, so with 2 the paragraph splits after two lines, and with 3 it cannot, so the whole paragraph moves to the second column.
When to use it
Use it in columns or print styles to avoid leaving just the first line of a paragraph alone at the bottom of a column or page.
Watch out
- It counts the lines inside one block. It does not affect breaks between separate elements, such as a heading and the next paragraph (use
break-afterand the like for those). - Firefox does not support it. It works in Chrome, Edge, and Safari.
- The number of lines to leave after the break is set with
widows. Both are inherited, so you can set them once onbody. 0, negative numbers, and decimals are not allowed.