CSS Widows

CSS Widows is a property that controls the minimum number of lines in a block of text that appears at the beginning or end of a column or page. It specifies the minimum number of lines that must be left at the top of the last page of a document, or the bottom of the first page of a document, so that a widow line (a line of text separated from the rest of the paragraph) does not appear.

Syntax

The syntax for CSS Widows is as follows:

widows: number|initial|inherit;

The number value specifies the minimum number of lines that must be left at the top or bottom of a page. The initial value sets the property to its default value. The inherit value inherits the property from its parent element.

Example

In the following example, we set the widows property to 3:

p {
  widows: 3;
}

This ensures that at least three lines will appear at the beginning or end of a page, so that a widow line does not appear.

Browser Support

CSS Widows is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge.

Conclusion

CSS Widows is a useful property for controlling the appearance of text at the beginning or end of a column or page. It ensures that a widow line does not appear, which can help to improve the overall readability of a document.