CSS widows Property

The widows property specifies the minimum number of lines of a block-level container that are left at the top of a page or column, leaving the remaining lines on the previous page or column.

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

This property is usually used with the @media rule.

The widows property has a sister property: the orphans, which specifies the number of lines that stay at the end of the previous page/column. In other words, the lines of the text in the previous page or column is the orphans, the rest of the lines left at the top of the new page or column is the widows.

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

widows: <integer> | initial | inherit;

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;
      }
      .text {
      padding: 20px;
      background-color: #fff;
      -moz-columns: 10em 3;
      -webkit-columns: 10em 3;
      columns: 10em 3;
      -webkit-column-gap: 2em;
      -moz-column-gap: 2em;
      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 simply 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 simply 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 simply 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 simply 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 simply 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>

In the given example the bold text shows the widows.

Values

Value Description
<integer> Specifies the number of lines that can be left at the start of a page or column. Negative values are invalid.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.


Practice Your Knowledge

Which statement is correct about CSS widows property?




Related articles