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

【问题标题】：Print html div without breaking its contents between two pages打印 html div 而不会在两个页面之间破坏其内容
【发布时间】：2012-11-11 22:35:19
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

并为打印编写样式。

【讨论】：

【解决方案2】：

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

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

当前兼容性 (source)：

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

【讨论】：