CSS Widows

The widows property in CSS is used to control the minimum number of lines in a block container (such as a paragraph) that must be left at the top of a page or column. The purpose of this property is to prevent widows—a typographical term that refers to the last line of a paragraph left alone at the top of a page or column, which can negatively affect the readability and aesthetic of the text layout.

Syntax

element {
    widows: number;
}

Try It Now

  • number: Specifies the minimum number of lines that must be left at the top of a page or column. The default value is 2.

How It Works

When a block of text flows from one page or column to the next, the widows property ensures that at least the specified number of lines are kept together, preventing a single line from being stranded at the top of the next page or column.

Example Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        p {
            widows: 3;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
        Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
        Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    </p>
</body>
</html>

Try It Now

Explanation

In the example above, the widows property is set to 3, which means that if the paragraph breaks at the end of a page or column, at least three lines will be carried over to the top of the next page or column. This helps maintain a visually balanced and readable text flow.

Browser Support

The widows property is supported in most modern browsers. However, since it’s primarily a typographic control, it may not have a noticeable effect in environments that do not support paginated media or multi-column layouts.

Use Cases

  • Print Styling: The widows property is particularly useful in print stylesheets to ensure that the printed text layout is aesthetically pleasing and easy to read.
  • Multi-Column Layouts: When dealing with web pages that use CSS multi-column layouts, controlling widows can help improve the readability of text split across columns.

Related Properties

  • orphans: Similar to widows, the orphans property controls the minimum number of lines in a block container that must be left at the bottom of a page or column.

Example with orphans

p {
    widows: 3;
    orphans: 2;
}

Try It Now

  • widows: 3 ensures at least three lines are left at the top of a new page or column.
  • orphans: 2 ensures at least two lines are left at the bottom of the current page or column.

Summary

The widows property is a typographic tool that helps improve the visual balance and readability of text in paginated or multi-column layouts by ensuring that a minimum number of lines appear at the top of a new page or column. This property is especially useful in print and multi-column layouts to prevent awkward text breaks and improve the overall appearance of the content.