CSS - widows 属性

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

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

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

可能的值

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

应用于

所有块级元素。

DOM 语法

object.style.widows = "3"

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

`widows` 属性在 Firefox 浏览器上不受支持。

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 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 样式，例如 background-color、height、padding、column 和 widows。
该 div 分为三列，widows 值设置为 3。
在父 div 下添加了三个 p 元素。
输出基于 widows 属性的值（在本例中为 3），并且随着片段中断，内容将相应显示。

**注意：**更改屏幕尺寸以查看布局的变化。

CSS widows - initial 值

以下示例显示了 `widows` CSS 属性的用法，其中 `widows` 值通过 id 声明设置为 `initial`，稍后在 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 print) 设置为 <integer>。

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

定义了一个媒体查询并将其应用于 p 元素，在打印模式下，具有 CSS 样式，例如 column、column-gap 和 widows。
有一个“打印”按钮，单击该按钮会在内容上应用 widows 值，即 5。
新部分显示最后一段的最后五行，位于顶部。

打印页面