CSS 分頁媒體 - break-inside 屬性

CSS break-inside 分頁媒體屬性用於在列印頁面模式下，當內容在列印頁面中時，中斷元素內部的頁面、列或區域。

可能的值

auto − 預設值。它允許根據分塊上下文在元素內部中斷。
avoid − 避免在元素內部中斷，強制內容保持在單個片段內。
avoid-page − 特別針對分頁媒體，避免在元素內部中斷。
avoid-column − 特別針對多列布局，避免在元素內部中斷。
avoid-region − 特別針對 CSS 區域，避免在元素內部中斷。截至目前，這屬於實驗性功能，未來可能會更改。

應用於

塊級元素。

DOM 語法

breakInside = "auto|avoid|avoid-page|avoid-column|avoid-region";

應用以下規則來確定是否必須進行中斷

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

分頁符別名

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

page-break-inside	break-inside
auto	auto
avoid	avoid

CSS break-inside - auto 值

以下示例演示了當頁面列印時，break-inside: auto 屬性如何在列內中斷段落。

<html>
<head>
<style>
   ul {
      column-width: 150px;
      column-gap: 20px;
   }
   li {
      list-style-type: none;
   }
   p {
      break-inside: auto; 
      border: 3px solid black;
      padding: 5px;
      margin: 5px;
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>Click on below button to see the effect when you print the page.</h3>
   <button onclick="printPage()">Print Page</button>
   <ul>
      <li> <p>This is first paragraph.</p></li>
      <li><p>This is second paragraph.</p></li>
      <li><p>This is third paragraph.</p></li>
      <li><p>This is fourth paragraph.</p></li>
      <li><p>This is fifth paragraph.</p></li>
      </ul>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-inside - avoid 值

以下示例演示了當頁面列印時，break-inside: avoid 屬性如何避免段落內部的分頁符。

<html>
<head>
<style>
   ul {
      column-width: 150px;
      column-gap: 20px;
   }
   li {
      list-style-type: none;
   }
   p {
      break-inside: avoid; 
      border: 3px solid black;
      padding: 5px;
      margin: 5px;
   }
   button {
      background-color: violet;
      padding: 5px;
   }
</style>
</head>
<body>
   <h3>Click on below button to see the effect when you print the page.</h3>
   <button onclick="printPage()">Print Page</button>
   <ul>
      <li> <p>This is first paragraph.</p></li>
      <li><p>This is second paragraph.</p></li>
      <li><p>This is third paragraph.</p></li>
      <li><p>This is fourth paragraph.</p></li>
      <li><p>This is fifth paragraph.</p></li>
      </ul>
   <script>
      function printPage() {
         window.print();
      }
   </script>
</body>
</html>

CSS break-inside - avoid-page 值

以下示例演示了當頁面列印時，break-inside: avoid-page 屬性如何避免元素內部的分頁符。

<html>
<head>
<style>
   div {
      break-inside: avoid-page;
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
   }
   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-inside - avoid-column 值

以下示例演示了當頁面列印時，break-inside: avoid-column 屬性如何避免節內列中斷。

<html>
<head>
<style>
   main {
      column-width: 200px;
      column-gap: 10px;
   }
   section {
      width: 200px;
      height: 100px;
      border: 2px solid black;
      margin: 10px;
      padding: 5px;
      break-inside: 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>
         <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>

列印頁面