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>

打印页面