widows

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The widows CSS property sets the minimum number of lines in a block container that must be shown at the top of a page, region, or column.

In typography, a widow is the last line of a paragraph that appears alone at the top of a page. (The paragraph is continued from a prior page.)

Syntax

css
/* <integer> values */
widows: 2;
widows: 3;

/* Global values */
widows: inherit;
widows: initial;
widows: revert;
widows: revert-layer;
widows: unset;

Values

<integer>

The minimum number of lines that can stay by themselves at the top of a new fragment after a fragmentation break. The value must be positive.

Formal definition

Initial value2
Applies toblock container elements
Inheritedyes
Computed valueas specified
Animation typeby computed value type

Formal syntax

Examples

Controlling column widows

HTML

html
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how widows work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>

CSS

css
div {
  background-color: #8cffa0;
  columns: 3;
  widows: 2;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}

Result

Specifications

Specification
CSS Fragmentation Module Level 3
# widows-orphans
CSS Multi-column Layout Module Level 1
# filling-columns

Browser compatibility

BCD tables only load in the browser

See also