在 CSS 中，widows 属性用于控制在发生分页或分栏之前必须显示在页面、区域或列顶部的文本块的最小行数。与 orphans 属性一样，它通常用于管理分页并确保将特定数量的行显示在一起，以提高打印文档或多列布局的可读性。
如果顶部的行数块的行数小于 widows 属性的值，则块被移动到下一页或下一列，以确保指定的行数一起显示。
根据排版，widows 是最后一个单独出现在页面顶部的段落行；当段落从旧页面继续时。
属性值
<integer>:指定可以在页面中显示的行数碎片中断后碎片的顶部。它应该只有正值。默认值为 2。
适用范围
所有块级元素。
DOM 语法
object.style.widows = "3" 与 orphans 属性（控制要在块底部显示的最小行数）一起使用，widows 属性有助于控制内容如何在页面或列之间流动和分隔，确保特定数量的内容保持在一起，以便在打印文档或多列布局中具有更好的可读性和美观性。
Firrox 浏览器不支持窗口。
CSS widows: <integer> 值
以下示例显示了 widows CSS 属性的用法，其中 widows 值通过类声明 (.widows-demo) 作为 <integer> 传递:
<html>
<head>
<style>
div.widows-demo {
background-color: tomato;
height: 170px;
columns: 3;
widows: 3;
padding: 5px;
}
p {
background-color: lightyellow;
}
p:first-child {
margin-top: 0;
}
</style>
</head>
<body>
<h1>Widows 属性</h1>
<div class="widows-demo">
<p>第一段显示一些只有一行的文本。</p>
<p>
同一 div“widows-demo”中的第二段，应用了一些样式。
测试 CSS orphan 属性的工作情况。本段共有三行。
第二段多了几行，用于测试目的的一些额外内容。
</p>
<p>
第三段是一些用于测试目的的额外文本。
第三段第二行测试windows属性。
</p>
</div>
</body>
</html> 在上面的示例中:
在 div 元素 (widows-demo) 上定义一个类，并使用 CSS 样式，例如 background-color、高度、内边距、列和窗口。
div 分为三列，windows设置为 3。
在父 div 下添加三个 p 元素。
输出基于 widows 属性的值（在本例中为 3），并且当片段中断时，相应地显示内容。
注意:更改屏幕尺寸以查看布局的变化。
CSS widows: initial 值
这里是一个显示 widows CSS 属性用法的示例，其中 widows 值通过 id 声明设置为初始值，稍后在 div 元素上调用:
<html>
<head>
<style>
#widows-demo {
columns: 3;
column-gap: 5em;
widows: initial;
}
div {
background-color: green;
padding: 5px;
}
p {
background-color: antiquewhite;
}
span {
font-style: italic;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div id="widows-demo">
<p>
<span>
div 中的第一段，应用了一些样式。
测试 CSS 的 widows 属性的工作情况。
本段共有三行。
第一段多了几行，用于测试目的的一些额外内容。
widows CSS 属性用于设置最小值
新页面上的行数。
div 中的第一段，应用了一些样式。
测试 CSS 的 widows 属性的工作情况。
本段共有三行。
div 中的第一段，应用了一些样式。
测试 CSS 的 widows 属性的工作情况。
本段共有三行。
</span>
</p>
<p>
第二段位于同一 div 中，并应用了一些样式。
测试 CSS 的 widows 属性的工作情况。
本段共有三行。
第二段多了几行，用于测试目的的一些额外内容。
widows CSS 属性用于设置最小值
新页面上的行数。
</p>
<p>
第三段是一些用于测试目的的额外文本。
第三段第二行。
widows属性测试
它占用一个整数值
或初始/继承值。
</p>
<p>
该页第三栏的第四段。
该段落的行数为两行。
测试orphans CSS 属性。
它占用一个整数值
或初始/继承值。
</p>
</div>
</body>
</html> 定义了一个 id (#widows-demo) 并将其应用于 div 元素，并使用 CSS 样式，例如列、列间隙和窗口。
div 是分为三列，间隙为5em，widows值设置为initial，默认为2。
在父div下添加四个p元素。
输出基于 widows 属性的值（在本例中为继承），并且当片段中断时，相应地显示内容。
CSS widows: @media print
以下示例显示了 widows CSS 属性的用法，其中 widows 值通过媒体查询 (@media print) 设置为 <integer>:
<html>
<head>
<style>
@media print {
p {
widows: 5;
columns: 3;
column-gap: 3em;
}
button {
display: none;
}
}
</style>
</head>
<body>
<article>
<p>
孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。
</p>
<p>
孩子如果已经长大，就得告别妈妈，四海为家。牛马有脚，鸟有翅膀，植物旅行又用什么办法？蒲公英妈妈准备了降落伞，把它送给自己的娃娃。只要有风轻轻吹过，孩子们就乘着风纷纷出发。苍耳妈妈有个好办法，她给孩子穿上带刺的铠甲。只要挂住动物的皮毛，孩子们就能去田野、山洼。豌豆妈妈更有办法，她让豆荚晒在太阳底下，啪的一声，豆荚炸开，孩子们就蹦着跳着离开妈妈。植物妈妈的办法很多很多，不信你就仔细观察。那里有许许多多的知识，粗心的小朋友却得不到它。
</p>
</article>
<button>Print</button>
<script>
const button = document.querySelector("button");
button.addEventListener("click", () => {
window.print();
});
</script>
</body>
</html> 在打印模式下定义媒体查询并应用于 p 元素，并使用 CSS 样式（例如列、列间隙和窗口）。
有一个"打印"按钮，单击该按钮会将窗口值（即 5）应用于内容。
新的部分在顶部显示最后一段的最后五行。