CSS Страничный носитель: невозможно достичь желаемого поведения при прерывании (прерывание после, прерывание перед бездействием)

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 -->

Это выглядит так:

And as for where I'd like page-breaks to be able to happen:

• You cannot break between an h2 and the first .subsection;
• You cannot break between an h4 and its .body-text;
• You can break between a .body-text and the h4 following it;
• You can break within a .body-text if it gets too long;
• You can break between a .subsection and another .subsection

---

Here's what I've tried so far:

/* 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;
}

Это кажется довольно синонимом того, что я обрисовал выше. Однако, когда я go напечатал, я вижу следующее:

You can see that, even though I've been explicit with break-*: auto;, there is still a break between the Course Content Creator h4 and its following .body-text. What is stopping it from breaking at the green line immediately preceeding it (after the Web Application Development line)? Surely these two boxes should be glued together.

The only thing that seems to actually do… anything is using break-inside: avoid; on the sections:

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

Clearly, this is not the correct way to go about things, since I very much do not want to avoid breaks inside of sections. It's just that this is the only thing that seem to affect how the document is actually printed.

---

I'm doing this in Chrome, version 83.0.4103.106. Firefox 77.0.1 performs the same way.

If it makes a difference, The .subsections are actually Vue components, which are slotted into each section's component. I don't see how this would be the problem, though, since I've double-checked with Chrome DevTools that even through all the CSS scoping that happens, every CSS property is applied to the correct element. In any case, the source code for this project is fully visible here: github.com / matthew-e-brown / Resume .

Answer 1

break-inside: avoid на section не означает, что section никогда не может иметь разрыв страницы. Это подразумевает, что этого следует избегать, если это возможно.

Также похоже, что вы хотите разрешить разрывы страниц внутри .subsection div, а не внутри section. page-break: avoid на .subsections - вот что заставило их go перейти на следующую страницу, когда они не подходят.

/*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: склеивает элемент после него к текущему элементу, поэтому они пытаются действовать как единый блок.