CSS - 打印时管理分页符

Question

我为我的妻子（学校老师）做了一个测速镜发生器。 她可以上传许多学生的照片，resize/crop 并检查一些选项以显示信息（例如名字/姓氏）

在屏幕上，一切正常。我使用经典的 bootstrap，因此响应式正确应用于所有元素。 看截图

当我调用我的打印函数（经典 javascript window.print()）时，我遇到了一个小的分页问题。

在我的 css 文件中，我使用标签“@media screen”仅在桌面应用设计。 在打印的情况下，没有规则应用于元素。

我附上了一小部分代码

我认为修复是一个 CSS 标记，如 page-break-after 或 page-break-before，但我不知道在哪里应用它... 你能帮帮我吗？

谢谢！

Answer 1

Css 指令：page-break-inside: avoid;