CSS 分頁媒體 - break-before 屬性

上一頁
下一頁

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

可能的值

以下是可以傳遞給b>break-before 分頁媒體屬性的一系列可能值

通用換行值

  • auto − 預設值。它將根據可用空間自動在元素之前換頁。

  • avoid − 如果需要，它會避免在元素之前換頁。

分頁符值

  • avoid-page − 它會阻止在元素之前換頁。

  • page − 強制在元素之前換頁。

  • left − 強制在元素之前換頁，以便下一頁格式化為左側頁。

  • right − 強制在元素之前換頁，以便下一頁格式化為右側頁。

欄換行值

  • avoid-column − 避免在元素之前換欄。

  • column − 在元素之前新增欄換行。

應用於

塊級元素。

DOM 語法

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

分頁符別名

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

page-break-before break-before
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-before - auto 值

以下示例演示了（在列印佈局中）break-before: auto 屬性在列印頁面時會自動在部分之前換頁 -

<html>
<head>
<style>
   main {
      height: 50px;
      width: 150px;
   }
   section {
      break-before: 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-before - avoid 值

以下示例演示了（在列印佈局中）break-before: avoid 屬性在列印頁面時會避免在部分之前換頁 -

<html>
<head>
<style>
   main {
      height: 50px;
      width: 180px;
   }
   section {
      break-before: 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-before - avoid-page 值

以下示例演示了 break-before: avoid-page 屬性在列印頁面時會避免在元素之前換頁 -

<html>
<head>
<style>
   .avoid-break-page {
      break-before: 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-before - page 值

以下示例演示了 break-before: page 屬性在列印頁面時會換頁 -

<html>
<head>
<style>
   .break-page {
      break-before: 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.After applying the break-before property, this paragraph will be displayed on the second page.</p></div>
   <div><p>This is a paragraph 3. It will be displayed on 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-before - left 值

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

<html>
<head>
<style>
   .page-break-left {
      break-before: 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.After applying the break-before: 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 4. It will be displayed on second page.</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-before - right 值

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

<html>
<head>
<style>
   .page-break-right {
      break-before: 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. After applying the break-before: 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 4. It will be displayed on second page.</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-before - avoid-column 值

以下示例演示了 break-before: avoid-column 屬性在列印頁面時會避免在每個部分之前換欄 -

<html>
<head>
<style>
   main {
      column-width: 200px;
      column-gap: 10px;
   }
   section {
      width: 200px;
      height: 130px;
      border: 2px solid black;
      margin: 10px;
      padding: 5px;
   }
   .break-column {
      break-before: avoid-column;
   }
   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>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>This is a column 1.</p>
      </section>
      <section class="break-column">
         <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>
   </main>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS Break column - column 值

以下示例演示了 break-before: column 屬性在列印頁面時會在每個部分之前新增欄換行以建立多欄佈局 -

<html>
<head>
<style>
   main {
      column-width: 200px;
      column-gap: 10px;
   }
   section {
      width: 200px;
      height: 130px;
      border: 2px solid black;
      margin: 10px;
      padding: 5px;
   }
   .break-column {
      break-before: column;
   }
   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>
   <main>
      <section>
         <h3>Column 1</h3>
         <p>This is a column 1.</p>
      </section>
      <section class="break-column">
         <h3>Column 2</h3>
         <p>This is a column 2. After applying break-before: column, this section will be displayed on next column.</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>
   </main>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.