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

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

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

p {
  background-color: #8ca0ff;
}

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

Result

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: 20th September 2023

Support Us