为何CSS列布局中break-after: page;失效？求解决方案

问题场景 #

你现在碰到的具体情况是这样的：

• 有一个设置了双列布局的.chapter容器，里面包含10个.subchapter模块
• 其中一个.subchapter通过column-span-all类实现跨双列显示，内部的表格加了break-after-page类，期望打印时这个表格结束后自动分页
• 但实际打印预览时，表格后并没有触发分页，后续的subchapter还是挤在同一页面；但只要关掉.chapter的column-*属性，分页就正常生效了
• 使用的是Chrome 66版本，且仅需要这个跨列的subchapter实现打印后分页

问题根源 #

Chrome 66在处理列布局内的跨列元素时，存在一个渲染bug：跨列元素本身会脱离列流，但它的break-after分页指令不会被浏览器正确识别，导致分页逻辑失效。

可行解决方案 #

推荐按优先级尝试下面几个调整方案：

方案1：给跨列的subchapter套外层容器，通过容器触发分页 #

把带column-span-all的.subchapter放在一个额外的容器中，给这个容器设置打印分页样式，绕过跨列元素的bug：

<div class="chapter">
  <div class="page-break-trigger">
    <div class="subchapter column-span-all">
      <table class="break-after-page">...</table>
    </div>
  </div>
  <div class="subchapter">...</div>
  <!-- 剩余8个subchapter -->
</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 {
  .page-break-trigger {
    break-after: page;
    -webkit-break-after: page;
  }
}

方案2：给跨列元素本身加前缀+伪元素辅助触发分页 #

Chrome对旧的webkit前缀支持更稳定，再配合伪元素强化分页触发逻辑：

.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 {
  .subchapter.column-span-all {
    break-after: page;
    -webkit-break-after: page;
  }
  /* 用伪元素强制触发分页逻辑 */
  .subchapter.column-span-all::after {
    content: "";
    display: block;
    height: 0;
    break-after: page;
    -webkit-break-after: page;
  }
}

方案3：打印时临时调整列布局 #

如果前两个方案都无效，可以在打印时临时关闭.chapter的列布局，给跨列元素设置分页后，再为后续的subchapter恢复双列：

.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 {
  .chapter { column-count: 1; }
  .subchapter.column-span-all {
    break-after: page;
    -webkit-break-after: page;
  }
  /* 为跨列元素之后的所有subchapter重新开启双列 */
  .subchapter.column-span-all ~ .subchapter {
    column-count: 2;
    column-gap: 4em;
  }
}

额外提示 #

Chrome 66版本相对老旧，对CSS分页和列布局的兼容性存在不少已知问题，如果业务允许的话，尽量升级到更高版本的Chrome，能从根源减少这类渲染bug。测试时一定要用Chrome的「打印预览」功能，能快速验证分页效果。

内容的提问来源于stack exchange，提问作者Florian