Question

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

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

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

干杯！

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

我将重现我遇到的问题并发布必要的HTML＆amp;我会尽快使用CSS。

Answer 1

考虑以编程方式删除打印版本的UL标签。您应该能够获得LI元素以显示相同的样式。

JavaScript甚至jQuery都可以轻松地处理这个问题，但我敢打赌你可以照顾这个服务器端。

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

Answer 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; }
}

Answer 3

为了获得更好的浏览器支持，您可以使用：

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

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

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

3 个答案: