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>

打印页面