CSS widows Property

Description

The widows property sets the minimum number of lines of text, which is located on the next page when printing a document. This property works if all text is placed on two or more printed pages. If the value of the widows property conflicts with the value of orphans , then widows takes precedence and is considered first.

Initial value

2

Applies to

Block level elements

Inherited

Yes

Computed value

As specified

Animatable

No

JavaScript syntax

object.style.widows

Syntax

widows: <integer>

Values

• <integer>Denotes the minimum amount of lines that can stay alone on the top of a new page. If the value is not positive, the declaration is invalid.

Example

<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>

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

p {
  background-color: #8ca0ff;
}

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

Browser Support

The following table will show you the current browser support for the CSS widows property.

Desktop
12	25	x	9.2	1.3

Tablets / Mobile
25	x	14	1	1.5	4.4

Last updated by CSSPortal on: 31st December 2023