Layout
widows
widows sets the minimum number of lines of a paragraph to carry over after a column or page break (at the top of the next column or page). If there would be fewer, more lines are moved from the previous column.
Syntax
<integer>Preview
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Presets
Drag the bottom-right corner to resize
Code
.box {
column-count: 2;
column-fill: auto;
widows: 3;
}Controls
widows3
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
About
What the values mean
- A positive integer such as
2: the number of lines to carry over after the break. The initial value is2.
The preview box has two columns with column-fill: auto, so lines fill the first column first. The light blue paragraph has six lines, and up to five fit in the first column. With 1 only one line goes to the second column, with the initial 2 two lines do, and with 3 three lines do.
When to use it
Use it in columns or print styles to avoid leaving just the last line of a paragraph alone at the top of the next 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-beforeand the like for those). - Firefox does not support it. It works in Chrome, Edge, and Safari.
- The number of lines to leave before the break is set with
orphans. Both are inherited, so you can set them once onbody. When both cannot be satisfied, one of them may be broken. 0, negative numbers, and decimals are not allowed.