CSS Paged Media : Cannot achieve desired breaking behaviour (break-after, 休息前什么都不做)

Question

这是我的文档相关部分的布局:

<!-- ↑ more sections -->
<section>
  <h2>Header 2</h2>
  <div class="subsection">
    <div><h3>Header 3</h3></div>
    <div>
      <h4>Header 4</h4>
      <div class="body-text"><!-- Parsed markdown text --></div>
      <h4>Header 4</h4>
      <div class="body-text"><!-- Parsed markdown text --></div>
      <!-- ↓ And so on... -->
    </div>
  </div>
  <div class="subsection">
    <div><h3>Header 3</h3></div>
    <div>
      <h4>Header 4</h4>
      <div class="body-text"><!-- Parsed markdown text --></div>
      <!-- ↓ And so on... -->
    </div>
  </div>
  <div class="subsection">
    <div><h3>Header 3</h3></div>
    <div>
      <h4>Header 4</h4>
      <div class="body-text"><!-- Parsed markdown text --></div>
      <!-- ↓ And so on... -->
    </div>
  </div>
  <!-- ↓ and so on... -->
</section>
<!-- ↓ more secitons -->

看起来像:

至于我希望分页符能够发生的地方:

您不能 在 h2 之间中断和第一个 .subsection ;

您不能 在 h4 之间中断和它的 .body-text ;

您可以 在 .body-text 之间中断和 h4跟随它；

您可以 在 .body-text 内突破如果时间太长；

您可以 在 .subsection 之间中断和另一个 .subsection

这是我迄今为止尝试过的:

/* Borders to show where I do and do not want breaks in the following screenshot */
h2 {
  break-before: auto;   /* ✅ */
  break-after: avoid;   /* ❌ */
  border-top: 1px solid forestgreen !important;
  border-bottom: 1px solid red !important;
}

.subsection:first-of-type {
  break-before: avoid;  /* ❌ */
  break-after: auto;    /* ✅ */
  border-top: 1px solid red !important;
  border-bottom: 1px solid forestgreen !important;
}

h4 {
  break-before: auto;  /* ✅ */
  break-after: avoid;  /* ❌ */
  border-top: 1px solid forestgreen !important;
  border-bottom: 1px solid red !important;
}

.subsection:first-of-type h4 {
  break-before: avoid;  /* ❌ */
  border-top: 1px solid red !important;
}

.body-text {
  break-before: avoid;  /* ❌ */
  break-after: auto;    /* ✅ */
  border-top: 1px solid red !important;
  border-bottom: 1px solid forestgreen !important;
}

这似乎与我上面概述的内容相当。然而，我看到
一旦我去打印以下内容:

你可以看到，即使我已经明确地使用 break-*: auto; ， 有
类(class)内容创建者之间仍有休息时间 h4及其以下 .body-text . 是什么阻止它立即突破绿线
在它之前(在 Web 应用程序开发线之后)？ 肯定是这两个
盒子应该粘在一起。
唯一似乎确实在做的事情……任何事情都在使用 break-inside: avoid;在 sections :

section {
  break-inside: avoid;
  background-color: rgba(255, 0, 0, 0.25);
}
/* ↓ CSS from above... ↓ */

显然，这不是正确的处理方式，因为我非常喜欢
不想避免在 section 内部中断s。只是这是唯一的
似乎影响文档实际打印方式的东西。

我正在 Chrome 中执行此操作，版本 83.0.4103.106。 Firefox 77.0.1 执行
同样的方法。
如果它有所作为， .subsections实际上是 Vue 组件，其中
被插入每个 section的组成部分。我不明白这是怎么回事
问题，不过，因为我已经仔细检查了 Chrome DevTools，即使
通过发生的所有 CSS 作用域，每个 CSS 属性都应用于
正确的元素。无论如何，这个元素的源代码是完全可见的
这里: github.com/matthew-e-brown/Resume .

Answer 1

break-inside: avoid在 section并不意味着 section永远不能有分页符。这意味着如果可能的话应该避免它。
看起来您确实希望在 .subsection 中允许分页符div，反对在 section 里面. page-break: avoid在 .subsections是什么导致他们在不合适时转到下一页。

/*prevent page breaking inside section, when a section doesn't fit it will display on the next page */
section {
  break-inside: avoid;
}
/*try not to break between h2 and section*/
h2 + .subsection {
  break-before: avoid;
}

如何考虑分页符
我认为描述我对主要分页选项的看法可能很有用。它可能有助于您的理解。 page-break: inside : 将这个元素内的所有内容粘合在一起。它将尝试充当单个块。 break-before: avoid : 将它之前的元素粘到当前元素上，以便它们尝试充当单个块。 break-after: avoid : 将它后面的元素粘到当前元素上，以便它们尝试充当单个块。