css - Why is break-after: page; ignored inside CSS columns?

Question

Let's say I have this code:

<div class="chapter">
  <div class="subchapter column-span-all">
    <table class="break-after-page">
      ...
    </table>
  </div>
  <div class="subchapter">
    ...
  </div>
</div>

with this CSS:

.chapter {
    column-count: 2;
    column-gap: 4em;
}
.subchapter.column-span-all {
    column-span: all;
}
.subchapter {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
}
@media print { 
    break-after-page {
        break-after: page
    }
}

When printing now, the table doesn't get a page break after it, the next elements are printed on the same page. If I however disable the column-* properties for .chapter, the table gets its own page on printing.

In the real example, I have 10 subchapters and only this one should have a page break afterwards when printing and span both columns. How can I achieve this?

Browser used is Chrome 66.

Answer 1

在你的@media printCSS 规则中，你写了break-after-page { ... }

但是break-after-page是一个类（对于你的table），所以在 CSS 中你需要用一个前导点来写它，比如.break-after-page { ... }