在 CSS 中，orphans 属性用于控制在发生分页或分栏之前必须显示在页面、区域或列底部的文本块中的最小行数。它通常用于控制打印文档或多列布局的分页符和分页。
如果块底部的行数小于 orphans 属性的值，该块被移动到下一页或下一列，以确保指定的行数一起显示。
根据排版，孤行是出现在页面底部的段落的第一行，独自的;当该段落在下一个新页面上继续时。
属性值
<integer>:指定可以显示的行数碎片中断之前碎片的底部。它应该只有正值。默认值为 2。
适用范围
所有块级元素。
DOM 语法
object.style.orphans = "3" 此属性通常与 widows 属性结合使用，该属性控制必须显示在顶部的最小行数页或栏。orphans和windows共同帮助确保指定数量的内容在分页期间保持在一起，从而提高打印文档或多列布局的可读性和流程。
Firfox 浏览器不支持orphans。
CSS orphans: 整数值
以下示例展示了orphans CSS 属性的用法，其中orphans值通过类声明 (.orphan-demo) 传递:
<html>
<head>
<style>
div.orphan-demo {
background-color: tomato;
height: 170px;
columns: 3;
orphans: 3;
padding: 5px;
}
p {
background-color: lightyellow;
}
p:first-child {
margin-top: 0;
}
</style>
</head>
<body>
<h1>Orphans 属性</h1>
<div class="orphan-demo">
<p>第一段显示一些只有一行的文本。</p>
<p>
同一 div“orphans-demo”中的第二段，应用了一些样式。
测试 CSS Orphans 属性的工作情况。
本段共有三行。
第二段多了几行，用于测试目的的一些额外内容。
</p>
<p>
第三段是一些用于测试目的的额外文本。
第三段第二行测试Orphans属性。
</p>
</div>
</body>
</html> 在上面的示例中:
在 div 元素（orphan-demo）上定义了一个类，具有 CSS 样式，例如背景颜色、高度、填充、列和orphans。
div 分为三列，orphans值设置为 3。
三个 p 元素添加到父 div 下。
输出基于孤立值的值（在本例中为 3），并且当片段中断且段落相应地在下一个块中继续时.
CSS orphans: 继承值
这是一个显示orphans CSS 属性用法的示例，其中orphans值作为继承传递并通过id 声明:
<html>
<head>
<style>
#orphan-demo {
columns: 3;
column-gap: 5em;
orphans: inherit;
}
div {
background-color: green;
padding: 5px;
}
p {
background-color: antiquewhite;
}
span {
font-style: italic;
color: green;
}
</style>
</head>
<body>
<div id="orphan-demo">
<p>
第一段显示一些只有一行的文本。
</p>
<p>
<span>
第二段位于同一 div 中，并应用了一些样式。
测试 CSS orphans属性的工作情况。
本段共有三行。
第二段多了几行，用于测试目的的一些额外内容。
orphans CSS 属性用于设置最小值
旧页面上的行数。
</span>
</p>
<p>
第三段是一些用于测试目的的额外文本。
第三段第二行。
测试orphans财产
它占用一个整数值
或初始/继承值。
</p>
<p>
该页第三栏的第四段。
该段落的行数为两行。
测试孤立 CSS 属性
它占用一个整数值
或初始/继承值。
</p>
</div>
</body>
</html> 在 div 元素 (#orphan-demo) 上定义并应用 id，并使用 CSS 样式，例如 column、column-gap 和
div 分为三列，并将 orphans 值设置为继承，即继承父级的默认值。
在父 div 下添加四个 p 元素。
输出基于orphans值（在本例中为继承）的值，并且随着片段的中断和段落相应地在下一个块中继续。
CSS orphans: 媒体打印
这里是一个示例，显示orphans CSS 属性的用法，其中orphans值通过媒体查询 (@media print) 设置为 <integer>:
<html>
<head>
<style>
@media print {
p {
orphans: 3;
columns: 2;
column-gap: 5em;
}
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 样式，例如列、列间隙和孤立值。
有一个"打印"按钮，单击该按钮会将孤立值应用到内容上。
旧部分显示最后一段的前三行。