CSS设置break-after分页属性后无视觉效果如何解决

• break-after 系列分页属性仅支持块级元素、网格容器、弹性容器等符合块级格式化上下文要求的元素，你将h1设置为inline或inline-block后，浏览器会直接忽略该属性，这是最核心的失效原因。
• break-after: page属于打印介质专用属性，普通网页滚动浏览模式下不会显示分页效果，只有在打印预览、PDF导出场景下才会生效。

1. 将h1的display属性恢复为默认的block值
2. 可以搭配旧版标准的page-break-after: always属性一起使用，兼容低版本浏览器
3. 测试时打开浏览器的打印预览界面（快捷键通常为Ctrl+P/Command+P）即可看到预期的分页效果

修正后的代码示例：

h1 {
  display: block;
  break-after: page;
  /* 兼容旧版浏览器 */
  page-break-after: always;
  font-size: 1.4em;
}

<h1>This is Page 1</h1>
<h1>This is Page 2</h1>
<h1>This is Page 3</h1>

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