通过 DevTools 模拟打印时查看分页符

Question

我正在尝试执行一些样式来处理打印时的分页符，以确保我的内容不会被切成两半。

我知道执行此操作所需的样式（

page-break-inside

等），但尝试验证它们是否有效是一项相当费力的任务，特别是当我在显示预览时无法查询 DOM 时。

在 Chrome（或任何其他浏览器）中，是否可以将页面置于打印模式并且让它在分页符所在的位置呈现？

目前我可以使用开发工具来启用打印媒体查询，但查看分页符发生位置的唯一方法是实际调出打印预览。然而，当这一切完成后，我无法与 DOM 交互来查看为什么元素会或不会因中断而被切成两半。

当一切正常时，这并不是真正的问题，但我们都知道，事情往往会表现得很奇怪！

谢谢

Answer 1

通过在你的身体上添加柱子

body {
  columns: 250px
}

当内容在更改窗口宽度时回流到列中时，您可以看到列上的元素出现中断。防止内容破坏列也可以防止其跨页破坏。

虽然不是模拟页面将在哪里中断，但它允许您访问 DOM，以帮助找出如何防止某些元素在页面上中断。