Tag widows

📄 CSS widows — Control Minimum Lines Left on a Page or Column

The widows property is part of CSS paged media and multi-column layout control. It specifies the minimum number of lines of a paragraph that must be left at the top of a page or column when a page or column break occurs.

🔹 What Does widows Do?

When your content breaks across pages or columns (like in printed documents, PDFs, or multi-column layouts), widowsprevents a single line or very few lines from being stranded at the top of a page/column — which looks awkward and breaks readability.

📘 Syntax

selector {
  widows: <number>;
}
  • <number> must be a positive integer (usually 1 or more).

✅ How It Works

  • The value sets the minimum lines to keep together at the start of a page or column.
  • If there are fewer than that number of lines left, the browser pushes those lines to the previous page/column.
  • It helps prevent “widow lines”, which are short lines stuck at the top after a break.

✍️ Example

p {
  widows: 2;
}

✅ When a paragraph breaks across pages or columns, at least 2 lines will appear at the top of the next page/column.

🔄 Related Property: orphans

  • orphans controls the minimum lines left at the bottom of a page or column.
  • Together, widows and orphans ensure paragraphs don’t split awkwardly.

🖼️ Image Idea: Page Break Illustration

Show a paragraph broken across pages/columns with:

  • Fewer than 2 lines at top (bad)
  • At least 2 lines at top (good, thanks to widows: 2)

Highlight the difference visually.

💡 Use Cases

  • Creating polished, professional printed documents or PDFs.
  • Improving multi-column layouts readability.
  • Enhancing ebook typography.
  • Controlling page breaks in content-heavy sites or apps.

✅ Summary

Propertywidows
PurposeMinimum lines of a paragraph at top after a break
ValuePositive integer (e.g., 1, 2, 3)
Works withMulti-column layout, paged media (print)
Relatedorphans (minimum lines at bottom)

🔚 Final Thought

Using widows ensures your text flow looks natural and readable across page or column breaks, eliminating awkward “widow” lines that harm typography quality.