为什么是break-after：page;在CSS列中忽略了什么？

Question

我们说我有这段代码：

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

使用这个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
    }
}

现在打印时，表格后面没有分页符，下一个元素打印在同一页面上。 但是，如果我禁用column-*的{​​{1}}属性，则表格会在打印时显示自己的页面。

在实际示例中，我有10个子章节，只有这个子页面在打印和跨越两列时才会有分页符。我怎样才能做到这一点？

使用的浏览器是Chrome 66。

Answer 1

在@media print CSS规则中，您撰写了break-after-page { ... }

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