CSS - orphans 属性

在 CSS 中，orphans 属性用于控制在页面、区域或列中断发生之前，必须在页面、区域或列底部显示的文本块中的最小行数。它通常用于控制打印文档或多列布局的页面中断和分页。

如果块底部的行数少于 orphans 属性的值，则块将移动到下一页或下一列，以确保显示指定数量的行。

根据排版，孤行是指段落的第一行单独出现在页面底部，而段落其余部分则在新页面上继续。

可能的值

<integer>：指定在分隔符中断之前，可以在片段底部显示的行数。它应该只有正值。默认值为 2。

应用于

所有块级元素。

DOM 语法

object.style.orphans = "3"

此属性通常与 widows 属性结合使用，该属性控制必须在页面或列顶部显示的最小行数。orphans 和 widows 共同确保在分页期间指定数量的内容保持在一起，从而提高打印文档或多列布局的可读性和流畅性。

orphans 在 Firefox 浏览器中不受支持。

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 property</h1>
   <div class="orphan-demo">
      <p>Paragraph one that shows some text having just one line.</p>
      
      <p>
         Paragraph two in the same div "orphans-demo", with some styling applied.
         Testing for the working of orphans property of CSS.
         There are three lines in this paragraph.   
         Paragraph two having few more lines for some extra content for the testing purpose.
      </p>
      
      <p>
         Paragraph three for some extra text for the testing purpose.
         Second line in the third paragraph to test the orphans property.
      </p>
   </div>
</body>
</html>

在上面的示例中

在 div 元素 (orphan-demo) 上定义了一个类，并具有 CSS 样式，例如背景颜色、高度、填充、列和 orphans。
该 div 分为三列，并且 orphans 值设置为 3。
在父 div 下添加了三个 p 元素。
输出基于 orphans 值（在本例中为 3），并且随着片段中断和段落相应地继续到下一个块。

CSS orphans - 继承值

以下示例显示了 orphans CSS 属性的使用，其中 orphans 值作为 inherit 传递并通过 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> 
         Paragraph one that shows some text having just one line.
		</p> 
      
		<p> 
		<span> 
         Paragraph two in the same div, with some styling applied.
         Testing for the working of orphans property of CSS.
         There are three lines in this paragraph.   
         Paragraph two having few more lines for some extra content for the testing purpose.
         The orphans CSS property is used to set the minimum 
         number of line on the old page.
		</span> 
		</p> 
      
		<p> 
         Paragraph three for some extra text for the testing purpose.
         Second line in the third paragraph.
         Testing for the orphans property
         which takes up an integer value
         or initial / inherit values. 
		</p> 
      
      <p> 
         Paragraph four in the third column of the page.
         Number of lines in this paragaraph is two.
         Testing for the orphans CSS property
         which takes up an integer value
         or initial / inherit values. 
		</p> 
	</div> 
</body>
</html>

在 div 元素 (#orphan-demo) 上定义并应用了一个 id，并具有 CSS 样式，例如列、列间距和 orphans。
该 div 分为三列，并且 orphans 值设置为 inherit，它继承父元素的默认值。
在父 div 下添加了四个 p 元素。
输出基于 orphans 值（在本例中为 inherit），并且随着片段中断和段落相应地继续到下一个块。

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>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
   </p>
  
   <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
      velit.
   </p>
   </article>
   
   <button>Print</button>
   
   <script>
      const button = document.querySelector("button");

      button.addEventListener("click", () => {
      window.print();
      });
   </script>
</body>
</html>

在 p 元素上定义并应用了一个媒体查询，在打印模式下，具有 CSS 样式，例如列、列间距和 orphans。
有一个“打印”按钮，单击该按钮会在内容上应用 orphans 值。
旧部分显示最后一段的前三行。

打印页面