CSS - 在打印时管理分页符

Question

我为我的妻子(学校老师)制作了一台长波望远镜发生器。 她可以上传许多学生的照片，调整大小/裁剪并检查一些选项以显示信息(例如名字/姓氏)

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

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

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

我附上了一小部分代码

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

谢谢!

Answer 1

CSS 指令:page-break-inside: avoid;