CSS 分頁媒體 - break-after 屬性

CSS break-after 分頁媒體屬性指定元素之後是否應該發生分頁符。這對於控制列印頁面的佈局非常有用。

可能的值

以下是可以傳遞給break-after分頁媒體屬性的可能值的列表

通用分頁符值

auto − 預設值。它根據可用空間自動在元素之後分頁。
avoid − 如果需要，它會避免在元素之後分頁。

分頁符值

avoid-page − 它阻止在元素之後分頁。
page − 此值始終在元素之後插入一個新頁面。
left − 強制在元素之後分頁，以便下一頁格式化為左頁。
right − 強制在元素之後分頁，以便下一頁格式化為右頁。

分欄符值

avoid-column − 避免在元素之後分欄。
column − 在元素之後新增分欄。

應用於

塊級元素。

DOM 語法

breakAfter = "auto|avoid|avoid-page|page|left|right|avoid-column|column";

分頁符別名

Web 瀏覽器將舊版 page-break-after 屬性視為break-after屬性的別名。這確保了使用page-break-after的網站的平滑執行。以下值對於break-after屬性應該相等。

page-break-after	break-after
auto	auto
left	left
right	right
avoid	avoid
always	page

應用以下規則來確定是否必須進行分頁

任何三個相關值（always、left、right、page、column 或 region）中作為強制分頁符值的任何一個都具有優先順序。如果有多個分頁屬性，我們選擇序列中最後出現的那個。順序是：break-before優先於break-after，break-after優先於break-inside。
如果任何三個相關值是避免分頁符值，例如 avoid、avoid-page、avoid-region 或 avoid-column，則不會在此位置新增分頁符。

CSS break-after - auto 值

以下示例演示了break-after: auto屬性如何在列印頁面時自動將部分換到新頁面。

<html>
<head>
<style>
   main {
      height: 50px;
      width: 150px;
   }
   section {
      break-after: auto; 
      border: 1px solid black;
      padding: 5px;
      margin: 10px;
   }
   button {
      background-color: violet;
      padding: 5px;
      margin: 10px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>This is a column 1.</p>
      </section>
      <section>
         <h3>Column 2</h3>
         <p>This is a column 2.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>This is a column 3.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>This is a column 4.</p>
      </section>
      <section>
         <h3>Column 5</h3>
         <p>This is a column 5.</p>
      </section>
      <section>
         <h3>Column 6</h3>
         <p>This is a column 6.</p>
      </section>
      <section>
         <h3>Column 7</h3>
         <p>This is a column 7. This section is break automatically based on the available space and content.</p>
      </section>
   </main>
<script>
   function printPage() {
      window.print();
   }
</script>
</body>
</html>

CSS break-after - avoid 值

以下示例演示了break-after: avoid屬性如何在列印頁面時避免在部分之後分頁。

<html>
<head>
<style>
   main {
      height: 50px;
      width: 180px;
   }
   section {
      break-after: avoid; 
      border: 1px solid black;
      padding: 5px;
      margin: 10px;
   }
   button {
      background-color: violet;
      padding: 5px;
      margin: 10px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>This is a column 1.</p>
      </section>
      <section>
         <h3>Column 2</h3>
         <p>This is a column 2.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>This is a column 3.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>This is a column 4.</p>
      </section>
      <section>
         <h3>Column 5</h3>
         <p>This is a column 5.</p>
      </section>
      <section>
         <h3>Column 6</h3>
         <p>This is a column 6.</p>
      </section>
      <section>
         <h3>Column 7</h3>
         <p>This is a column 7.</p>
      </section>

   </main>
<script>
   function printPage() {
      window.print();
   }
</script>
</body>
</html>

CSS break-after - avoid-page

以下示例演示了break-after: avoid-page屬性如何在列印頁面時避免在元素之後分頁。

<html>
<head>
<style>
   .avoid-break-page {
      break-after: avoid-page; 
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>

   <div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
   <div class="avoid-break-page"><p>This is a paragraph 2. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 3. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 4. It will be displayed on first page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-after - page 值

以下示例演示了break-after: page屬性如何在列印佈局中將元素換到新頁面。

<html>
<head>
<style>
   .break-page {
      break-after: page; 
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>

   <div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
   <div class="break-page"><p>This is a paragraph 2. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 3. After applying the break-after property, this paragraph will be displayed on the second page.</p></div>
   <div><p>This is a paragraph 4. It will be displayed on second page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-after - left 值

以下示例演示了break-after: left屬性如何在列印頁面時將元素換到左側的下一頁。

<html>
<head>
<style>
   .page-break-left {
      break-after: left; 
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>

   <div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 2. It will be displayed on first page.</p></div>
   <div class="page-break-left"><p>This is a paragraph 3. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 4. After applying the break-after: left property, this paragraph will be displayed to the next page on left side when page is printed.</p></div>
   <div><p>This is a paragraph 5. It will be displayed on second page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-after - right 值

以下示例演示了break-after: right屬性如何在列印頁面時將元素換到右側的下一頁。

<html>
<head>
<style>
   .page-break-right {
      break-after: right; 
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>

   <div><p>This is a paragraph 1. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 2. It will be displayed on first page.</p></div>
   <div class="page-break-right"><p>This is a paragraph 3. It will be displayed on first page.</p></div>
   <div><p>This is a paragraph 4. After applying the break-after: right property, this paragraph will be displayed to the next page on right side when page is printed.</p></div>
   <div><p>This is a paragraph 5. It will be displayed on second page.</p></div>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-after - column 值

以下示例演示了break-after: column屬性如何在列印頁面時為每個部分新增分欄以建立多列布局。

<html>
<head>
<style>
   main {
      column-count: 3;
      column-gap: 20px; 
   }
   section {
      break-after: column; 
      border: 1px solid black;
      padding: 5px;
   }
   button {
      background-color: violet;
      padding: 5px;
      margin: 10px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 2</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 5</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 6</h3>
         <p>CSS break-after: column example.</p>
      </section>
   </main>
<script>
   function printPage() {
      window.print();
   }
</script>
</body>
</html>

CSS break-after - avoid-column 值

以下示例演示了break-after: avoid-column屬性如何在列印頁面時避免在每個部分之後分欄。

<html>
<head>
<style>
   main {
      column-count: 3;
      column-gap: 20px; 
   }
   section {
      break-after: avoid-column; 
      border: 1px solid black;
      padding: 5px;
   }
   button {
      background-color: violet;
      padding: 5px;
      margin: 10px;
   }
</style>
</head>
<body>
   <p>Click on below button to see the effect when you print the page.</p>
   <button onclick="printPage()">Print Page</button>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 2</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 3</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 4</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 5</h3>
         <p>CSS break-after: column example.</p>
      </section>
      <section>
         <h3>Column 6</h3>
         <p>CSS break-after: column example.</p>
      </section>
   </main>
<script>
   function printPage() {
      window.print();
   }
</script>
</body>
</html>

列印頁面