The widows CSS property is used to specify the minimum number of lines in a block of text that must be displayed at the top of a new page or column. It is primarily used in print media to ensure that a certain number of lines are not left stranded at the bottom of a page or column, which can disrupt the readability and visual flow of the content.
The widows property accepts an integer value, representing the minimum number of lines that should be displayed at the top of a new page or column.
Here’s an example:
.print-content {
widows: 3;
}
In this example, the .print-content class sets the widows property to 3. This ensures that at least 3 lines of text from the block will be displayed at the top of a new page or column. If the content does not have enough lines to meet the specified minimum, the page or column break may be adjusted to accommodate the required number of lines.
It’s important to note that the widows property may not be fully supported by all browsers, and its behavior may vary across different print settings and media types. Additionally, it is primarily intended for print media and may not have any effect on the rendering of content in the browser.
The widows property can be useful when working with print stylesheets to control the presentation and layout of printed content, ensuring that a minimum number of lines are displayed at the top of new pages or columns.