打印长列表时如何避免分页答案

【问题标题】：How to avoid page breaking when printing long lists打印长列表时如何避免分页
【发布时间】：2011-10-24 11:12:21
【问题描述】：

我正在为我的客户网站上的可打印小册子做一些样式，其中可能包含长长的无序列信息列表。

我的问题是，在 Firefox 中打印时，整个 <UL> 将进入一个新页面，而不是其子 <li> 的拆分，这意味着它不会与页面上的其他内容一起流动。

我发现 CSS 属性 page-break-inside 仅在 Opera 和 IE8 中受支持，有没有人知道这个属性的替代方法或我可以用来防止整个列表进入新页面的另一种方法。

干杯！

更新 [23.11.2011]： 我能够解决我的问题，因为打印的文档是根据用户的选择生成的，所以这个页面只会被打印我（非常不情愿地）把语义推到一边，删除了 UL 并用DIV，正确中断。不过，对于任何有类似问题但使用相同 HTML 进行打印和屏幕的人来说，这个问题仍然存在。

我会重现我遇到的问题并尽快发布必要的 HTML 和 CSS。

【问题讨论】：

这很痛苦，但是 pdf 导出 ...
如果您可以发布一个示例 html 文档来处理，这将有助于测试潜在的答案。
究竟是什么版本的FF？我正在使用最新的，它通常会拆分 UL。
您也尝试过应用 orphans 或 widows 属性吗？ ff3.5+ 支持它们和分页符

标签： html css printing

【解决方案1】：

考虑以编程方式删除印刷版的 UL 标签。您应该能够让 LI 元素通过一些样式显示相同的内容。

JavaScript 甚至 jQuery 都可以很容易地处理这个问题，但我敢打赌你可以处理这个服务器端。

我知道它在技术上不是有效的 HTML，但有时当 HTML/CSS 不能为您提供灵活性时，您必须改变规则。

【讨论】：

【解决方案2】：

归功于david walsh blog

@media screen {
  .page-break  { height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
@media print {
  .page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}

【讨论】：

是的，我使用 Google 找到了这个解决方案 - 只是我可以使用的另一个资源。老实说，我不确定谁在乎我使用的搜索引擎。我在我安装的每个浏览器（IE8、FF4、FF5、FF6 和 FF8、Opera 11 和 Safari 5）中都进行了测试——在所有浏览器中都有效。
@JoshStodola - 如果来源是可信的，那么正确答案来自哪里并不重要，它可以帮助提出问题的人。

【解决方案3】：

为了更好的浏览器支持，你可以使用这个：

ul li {
  page-break-after: avoid;
  }
ul li:first-child {
  page-break-after: auto;
  }

应该也可以在 IE7 中使用。但在 Firefox 中不起作用。浏览器在打印方面很糟糕。

【讨论】：