javascript - 打印 html div 而不会在两个页面之间破坏其内容

Question

当我使用 window.print() 打印我的网页时，结果将是几页。我有一些不能在两页之间中断的 html div 元素。虽然，因为页面内容是动态创建的，我无法知道我的 div 何时会被破坏。

是否有任何 css 或 javascript 可以用来告诉特定的 div 不能在两个页面之间被破坏？

我看到了我可以在我的 div 周围使用的 css 规则“page-break-before”，但即使在可以避免的情况下也会导致分页（不必要地增加总打印页数）。

Answer 1

你最好的选择是这个（但有兼容性问题）

.noBreak { page-break-inside: avoid;  } 

当前兼容性（来源）：

Chrome     Firefox (Gecko)    Internet Explorer    Opera     Safari (WebKit)
1.0        19.0 (19)          8.0                  7.0       1.3 (312)

其他 SO 讨论：page-break-inside 的替代方案：由于兼容性问题而避免

W3学校

Answer 2

需要连接另一个 css 进行打印：

<link type="text/css" rel="stylesheet" media="print" href="PATH_TO_CSS" />

并编写仅用于打印的样式。