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

  • 舊部分顯示最後一段的前三行。

列印頁面
上一頁
下一頁
廣告