CSS widows Property

What You’ll Learn

The widows property helps you control how text breaks across pages and columns so stray lines do not appear alone at the top of a new column or page.

Introduction

The widows property in CSS is used to control the minimum number of lines of a block container that must be shown at the top of a page or column.

This property helps in preventing single lines (widows) from appearing at the top of a new page or column, which can improve the readability and visual flow of the text.

Definition and Usage

Think of a “widow” line as a lonely line stranded at the top of a column or page while the rest of the paragraph continued above the break. Setting widows: 3 tells the browser to keep at least three lines together at the top when possible.

Use it in articles, magazines, print stylesheets, and any multi-column text layout where clean breaks matter.

📝 Syntax

The syntax for the widows property is simple. It can be applied to any block container element.

element {
  widows: <integer>;
}

Here, the value is a positive integer specifying the minimum number of lines.

Basic Example

p {
  widows: 3;
}

Syntax Rules

• The value must be a non-negative integer such as 2 or 3.
• It applies to block containers like paragraphs and divs with flowing text.
• It is most effective when content can break across pages or columns.
• Pair with orphans for balanced typography at both sides of a break.
• The property is inherited.

Related Properties

• orphans — minimum lines at the bottom before a break
• column-count — creates multi-column layouts where widows matters
• break-inside — controls whether elements may split across pages
• line-height — affects how many lines fit in a column or page

🎯 Default Value

The default value of the widows property is 2. This means that by default, at least two lines of a block container must be shown at the top of a page or column when possible.

💎 Property Values

The widows property accepts a single integer value.

When to Use widows

widows is helpful whenever text flows across breaks:

• Print stylesheets — Improve page breaks when users print articles or documentation.
• Multi-column articles — Avoid a single line sitting alone at the top of a column.
• Magazine-style layouts — Keep professional typography in long-form content.
• Documentation PDFs — Pair with orphans for cleaner paged output.
• News and blog columns — Reduce awkward breaks in responsive column layouts.

Examples Gallery

In this example, we’ll ensure that at least three lines of a paragraph are shown at the top of a new page or column.

<style>
  p {
    widows: 3;
  }
</style>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

.article {
  column-count: 2;
  widows: 3;
  orphans: 3;
}

@media print {
  p {
    widows: 3;
    orphans: 3;
  }
}

.story {
  column-count: 2;
  orphans: 3;
  widows: 3;
}

♿ Accessibility

• Readability benefits everyone — Cleaner breaks help low-vision readers and reduce cognitive load when scanning long text.
• Do not hide content — widows adjusts breaks; it should never remove text from the document.
• Test print layouts — Verify printed documentation remains readable with sufficient contrast and font size.
• Screen readers are unaffected — widows is a visual typography property; semantic HTML structure still matters most for assistive tech.

Pair with orphans

widows handles lines at the top of a break. The related orphans property sets the minimum number of lines that must stay at the bottom before the break.

article {
  orphans: 3;
  widows: 3;
}

💡 Best Practices