after不显示_记CSS中break-after的一个坑

最近在写一个typora主题以方便我写实验报告。CSS不仅可以用作指定网页样式，还可以用来指定打印时的一些选项，具体就是用 @media print 和 @page 啦，还有一些属性比如page-after-break是只在打印时起作用的。

这样我就可以实现typora里现在还没有的分页功能，官网教程里也是这么说的，插入一句

<div style="page-break-after:always;"></div>

即可。

但是我想让这个“分页符”在编辑模式下可见，于是我写了如下CSS代码：

@media print {
  #write .page-break {
    display: none;
    page-break-after: always;
  }
}

然后在要分页的地方插入

<hr class="page-break">

这样在编辑时这个hr是可见的水平线，而打印时则是不显示的。

结果生成的pdf文件里此处并未分页……

我折腾了一番，百思不得其解，于是用typora导出html文件，发现居然自动把

page-break-after: always;

替换成了

break-after: page;

我估计这是pandoc的锅？但是为啥break-after属性不管用呢……

然后我找到了break-after文档

break-after​developer.mozilla.org

按它所说break-after是page-break-after的升级版，为什么不管用呢……

里面有关键的一句：

当时我看到这句话还没注意，晚上躺在床上苦思冥想时才忽然明白，是

display: none;

这一句出了问题！没有显示，自然没有产生一个box，就没有分页了……

去掉这一句，换成

visibility: hidden;

这样只是不显示，但是对布局的影响还在，换句话说就是还有一个透明的box。果然，成功产生了分页效果。

这样看来break-after并不能完全兼容page-break-after，是个坑。

另外吐槽一下typora，在里面写html语句，效果并不能实时显示出来，非得导出pdf或html文件才行，因为编辑器在把输入即时转换为html代码时会把class属性抹掉……