CSS widows Property

The widows CSS property specifies the minimum number of lines of a block-level container that must remain at the top of a page or column.

A widow is a single line or word that appears alone at the top of a page or column.

This property is primarily used in paged media contexts, such as @media print or @page rules.

The widows property has a related property: orphans, which specifies the minimum number of lines that must stay at the bottom of the previous page or column. In other words, the lines remaining at the end of the previous page are orphans, while the lines left at the top of the new page are widows.

Info

Negative values are invalid.

Initial Value	2
Applies to	Block container elements.
Inherited	Yes.
Animatable	No.
Version	CSS2
DOM Syntax	object.style.widows = "3";

Syntax

CSS widows values

widows: <integer> | initial | inherit;

Example of the widows property:

CSS widows code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #eee;
        color: #000;
        font-size: 1em;
        font-family: Roboto, Helvetica, sans-serif;
      }
      hr {
        margin: 50px 0;
      }
      .example {
        margin: 30px auto;
        width: 800px;
      }
      @media print {
        .text {
          padding: 20px;
          background-color: #fff;
          columns: 10em 3;
          column-gap: 2em;
          text-align: justify;
        }
        .text p {
          widows: 2;
        }
      }
    </style>
  </head>
  <body>
    <h2>Widows property example</h2>
    <div class="example">
      <div class="text">
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is dummy text of the printing and typesetting industry.
        </p>
        <p>
          Lorem Ipsum is simply dummy text of the printing and <strong>typesetting industry. Lorem Ipsum has been...</strong>
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>
          Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        </p>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Note

The widows property only takes effect in paged media (e.g., print preview). The example uses @media print to demonstrate this.

Values

Value	Description
`<integer>`	Specifies the minimum number of lines that must remain at the top of a page or column. Negative values are invalid.
initial	Makes the property use its default value.
inherit	Inherits the property from its parent element.

Practice

Which statement is correct about CSS widows property?

Integer value specifies the number of lines that can be left at the end of a page or column.
This property is never used with the @media rule.
The widows property has a related property: the orphans.
It's an animatable property.