CSS - widows 属性_CSS 菜鸟教程

在 CSS 中，widows 属性用于控制在页面、区域或列的顶部必须显示的文本块的最小行数，然后才能发生分页符或分列符。与 orphans 属性一样，它通常用于管理分页，并确保一起显示特定数量的行，以提高打印文档或多列布局中的可读性。

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

根据排版，widows 是单独出现在页面顶部的段落的最后一行;当段落从旧页面继续时。

可能的值

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

适用于

所有块级元素。

DOM 语法

object.style.widows = "3"

Widows 属性与 orphans 属性（控制在块底部显示的最小行数）一起，有助于控制内容在页面或列之间的流动和中断方式，从而确保特定数量的内容保持在一起，以便在打印文档或多列布局中实现更好的可读性和美观性。

widows 在 Firfox 浏览器上不受支持。

CSS widows - <整数>值

下面是一个示例，显示了 widows CSS 属性的用法，其中 widows 值通过类声明（.widows-demo）作为<整数>传递：

<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 property</h1>
	 	<div class="widows-demo">
	 	 	 <p>Paragraph one that shows some text having just one line.</p>
	 	 		
	 	 	 <p>
	 	 	 	 	Paragraph two in the same div "widows-demo", with some styling applied.
	 	 	 	 	Testing for the working of orphan 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 widows property.
	 	 	 </p>
	 	</div>
</body>
</html>

在上面的例子中：

在 div 元素（widows-demo）上定义了一个类，具有 CSS 样式，例如背景颜色、高度、填充、列和寡妇。
div 分为三列，widows 值设置为 3。
在父 div 下添加了三个 P 元素。
输出基于 Widows 属性的值（在本例中为 3），当片段中断时，将相应地显示内容。

注意：更改屏幕大小以查看布局的变化。

CSSwidows - 初始值

下面是一个示例，显示了 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>
	 	 	 	 	Paragraph one in the div, with some styling applied.
	 	 	 	 	Testing for the working of widows property of CSS.
	 	 	 	 	There are three lines in this paragraph. 		
	 	 	 	 	Paragraph one having few more lines for some extra content for the testing purpose.
	 	 	 	 	The widows CSS property is used to set the minimum	
	 	 	 	 	number of lines on the new page.
	 	 	 	 	Paragraph one in the div, with some styling applied.
	 	 	 	 	Testing for the working of widows property of CSS.
	 	 	 	 	There are three lines in this paragraph. 		
	 	 	 	 	Paragraph one in the div, with some styling applied.
	 	 	 	 	Testing for the working of widows property of CSS.
	 	 	 	 	There are three lines in this paragraph. 		
	 	 	 </span>
		 			 	</p>	
	 	 		
		 			 	<p>	
	 	 	 	 	Paragraph two in the same div, with some styling applied.
	 	 	 	 	Testing for the working of widows 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 widows CSS property is used to set the minimum	
	 	 	 	 	number of lines on the new page.
		 			 	</p>	
	 	 		
		 			 	<p>	
	 	 	 	 	Paragraph three for some extra text for the testing purpose.
	 	 	 	 	Second line in the third paragraph.
	 	 	 	 	Testing for the widows 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 （#widows-demo）并应用于 div 元素，具有 CSS 样式，例如 column、column-gap 和 widows。
div 分为三列，间距为 5em，widows 值设置为 initial，默认为 2。
在父 div 下添加了四个 p 元素。
输出基于 widows 属性的值（在本例中为 inherit），当片段中断时，内容会相应地显示。

CSS widows - 媒体印刷

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

<html>
<head>
<style>
	 	@media print {
	 	 	 p {
	 	 	 	 	widows: 5;
	 	 	 	 	columns: 3;
	 	 	 	 	column-gap: 3em;
	 	 	 }

	 	 	 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.	
	 	</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.
	 	 	 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>
	 	</article>
	 	
	 	<button>Print</button>
	 	
	 	<script>
	 	 	 const button = document.querySelector("button");

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

在打印模式下，使用 CSS 样式（如 column、column-gap 和 widows）定义并应用于 p 元素。
点击时有一个按钮“打印”，其中 widows 值（即 5）将应用于内容。
新部分在顶部显示最后一段的最后五行。

<< CSS - word-break 属性 CSS - white-space 属性 >>