CSS - orphans 属性_CSS 菜鸟教程

在 CSS 中，orphans 属性用于控制文本块中的最小行数，这些行数必须在页面、区域或列的底部显示，然后才能发生分页符或列分隔符。它通常用于控制打印文档或多列布局的分页符和分页的上下文。

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

根据排版，orphan 是单独出现在页面底部的段落的第一行;当段落在下一个新页面上继续时。

可能的值

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

适用于

所有块级元素。

DOM 语法

object.style.orphans = "3"

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

Firfox 浏览器不支持 orphans。

CSS 孤立项 - 整数值

下面是一个示例，显示了 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 样式，例如 background-color、height、padding、column 和 orphans。
div 分为三列，orphans 值设置为 3。
在父 div 下添加了三个 P 元素。
输出基于 Orphans 值的值（在本例中为 3），并且随着片段的中断和段落在下一个块中相应地继续。

CSS 孤立项 - 继承值

下面是一个示例，显示了 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>	
	 	 	 	 	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>

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

CSS 孤立项 - 媒体打印

下面是一个示例，显示了孤立 CSS 属性的用法，其中孤立值通过媒体查询（@media打印）设置为<整数>：

<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>

在打印模式下，使用 CSS 样式（如 column、column-gap 和 orphans）定义并应用于 p 元素。
单击时会有一个按钮“打印”，该按钮的孤立值将应用于内容。
旧部分显示最后一段的前三行。

<< CSS - offset-rotate 属性 CSS - outline 属性 >>