CSS widows

The widows property in CSS allows you to control the minimum number of lines displayed at the top of a page in a block of text before a page break can occur. This can be useful for ensuring that headings or important information are not split between pages.

The widows property can be applied to any block-level element, such as paragraphs, headings, or list items.

The syntax for using the widows property is:


selector {
    widows: value;
}

Where selector is the element you want to target and value is the minimum number of lines that should not be split between pages.

Let's see an example to better understand how the widows property works:

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id vehicula nisi. Duis finibus, mi et consequat commodo, nunc dolor volutpat libero, eu aliquet odio metus eget lectus. Pellentesque euismod arcu non nibh vestibulum, ut commodo velit malesuada. Quisque pharetra, tellus at suscipit cursus, enim lorem elementum quam, sit amet accumsan odio nisi ut felis. Duis mattis ante eget sem vulputate venenatis.

In the example above, we have set the widows property to 2 for the paragraph. This means that at least 2 lines of the paragraph will be displayed at the top of a page before a page break can occur.

You can adjust the value of the widows property to suit your needs and ensure that your content is displayed how you want it.