在HTML文档中控制分页，以避免页面末尾出现空白区域

前端开发 2026-07-11

我在Chrome打印一个HTML文档，想要控制分页。

<!doctype html>
<html lang="en">
  <head>
    <title>Page Breaks</title>
  </head>
  <body>
    <div style="border: thin solid red; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem;">
      <div style="border: thin solid green; padding: 0.5rem; break-after: avoid;">Section Heading</div>
      <div style="border: thin solid blue; padding: 0.5rem; break-after: avoid;">Subsection Heading</div>
      <div style="border: thin solid fuchsia; padding: 0.5rem; break-inside: avoid;">Text<br>Text<br>Text</div>
      <div style="border: thin solid fuchsia; padding: 0.5rem; break-inside: avoid;">Text<br>Text<br>Text</div>
      <div style="border: thin solid blue; padding: 0.5rem; break-after: avoid;">Subsection Heading</div>
      <div style="border: thin solid fuchsia; padding: 0.5rem; break-inside: avoid;">Text<br>Text<br>Text</div>
      <div style="border: thin solid fuchsia; padding: 0.5rem; break-inside: avoid;">Text<br>Text<br>Text</div>
    </div>
  </body>
</html>

上述 HTML 的浏览器渲染结果

绿色的“Section Heading”仅在每个红色部分的开头出现一次。

蓝色的“Subsection Heading”可以在红色部分内多次出现，且总是紧跟着一个或多个粉色部分。

我不想让粉色部分跨越分页边界，所以在粉色div上使用break-inside: avoid，这也有效。

我不想让蓝色的小节标题在某一页底部打印，其后第一块粉色区域在另一页，所以在蓝色的div上使用break-after: avoid，这也能起作用。

最后，我不希望绿色分区标题单独出现在某一页的末尾，其第一个蓝色子小节又在另一页，因此在绿色的div上使用break-after: avoid，也起作用。

我唯一剩下的问题是如果绿色分区标题挤到后面的页面，红色方块就会留在前一页，就像这样：

浏览器打印视图：一页末尾有一个空的红色方块，方块的内容从下一页开始

我想不出让红色方块也在随后的页面开始的方法。感觉这像是那种显而易见的解决办法就在眼前，却看不见。

我不想在红色方块上使用break-inside: avoid或break-before: always，因为那样会在许多情况下引入分页，这并非必要或期望的。

解决方案

我真的希望有更好的解决办法，但如果红色边框只是一个CSS边框，你可以用多个伪元素段来实现它：

.section-heading {
  border: thin solid green; 
  padding: 0.5rem;
  break-after: avoid;
}

.subsection-heading {
  border: thin solid blue; 
  padding: 0.5rem; 
  break-after: avoid;
}

.text {
  border: thin solid fuchsia; 
  padding: 0.5rem; 
  break-inside: avoid;
}

.container {  
  display: flex; 
  flex-direction: column;
  padding: 0 0.5rem;
  gap: 0.5rem;
}

.container > * {
  position: relative;
}

.container :first-child,
.container :last-child {
  margin-top: 0;
}

.container :first-child {
  break-after: avoid;
}
.container :last-child {
  break-before: avoid;
}

.container :first-child::before,
.container :last-child::before {
  left: -0.5rem;
  right: -0.5rem;
}

.container :first-child::before {
  border-top: 1px solid red;
  top: 0;
}

.container :last-child::before {
  border-bottom: 1px solid red;
  bottom: 0;
}

.container :nth-child(2) {
  margin-top: 0;
}

.container > *::before {
  content: '';
  position: absolute;
  left: calc(-1px - 0.5rem);
  right: calc(-1px - 0.5rem);
  top: -1px;
  bottom: calc(-1px - 0.5rem);
  border-left: 1px solid red;
  border-right: 1px solid red;
}

<div class="container">
  <div></div>
  <div class="section-heading">Section Heading</div>
  <div class="subsection-heading">Subsection Heading</div>
  <div class="text">Text<br>Text<br>Text</div>
  <div class="text">Text<br>Text<br>Text</div>
  <div class="subsection-heading">Subsection Heading</div>
  <div class="text">Text<br>Text<br>Text</div>
  <div class="text">Text<br>Text<br>Text</div>
  <div></div>
</div>

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。