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。
新部分顯示最後一段的最後五行，位於頂部。

列印頁面