CSS widows Property

Posted in CSS Tutorial

Updated on Jul 14, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 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.

💡 Syntax

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

Syntax

Copied

element {
  widows: value;
}

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

🎛️ 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.

🏠 Property Values

Value	Description
integer	A positive integer specifying the minimum number of lines that must be shown.

📄 Example

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.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS widows Property Example</title>
  <style>
    p {
      widows: 3;
    }
  </style>
</head>
<body>
  <h1>Paragraph with Custom Widows Property</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.</p>
</body>
</html>

🖥️ Browser Compatibility

The widows property is supported in most modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, it is always a good practice to test your website across different browsers to ensure compatibility.

🎉 Conclusion

The widows property is a useful tool for web developers looking to improve the readability and visual flow of text on their web pages.

By ensuring that a minimum number of lines are shown at the top of a page or column, you can avoid awkward breaks and enhance the overall user experience. Experiment with different values to see how this property can benefit your web projects.