我有以下HTML，我想保持跨越多个页面时被分解。问题是如果我使用page-break-before或after，它将把每个元素放在它自己的页面上。我遇到的另一个问题是，如果我将单元格CSS类或换行类设置为display：block，则DIV或LI仍然被分解。我还有一个打印媒体CSS文件和CSS文件。我想保留< li class =“cell”>元素及其内容被破坏。
<div class="pad">
<h1 style="text-align: center; margin: 10px 0">
Work Orders for Jan 05,2011
</h1>
<p class="printHidden">
<a href="/orders/print-all/date/2011-01-05">Print All Work Orders</a>
</p>
<ul class="workorders">
<li class="cell">
<div class="wrap" id="146">
<div class="scheduled">
<p>
<strong>Work Order:</strong> <a href="/orders/view/work-order/146">158801</a>
</p>
<p>
<strong>Client:</strong> Client Name
</p><br>
<b>Resources</b>
<ul>
<li>
<a href="/resources/view/resource-id/5" id="Person-5">Mikell McLaindon</a>
</li>
<li>
<a href="/resources/view/resource-id/9" id="Person-9">Jose Copper</a>
</li>
</ul>
</div>
<div class="unschedule printHidden">
<h1 style="text-align: center; margin: 10px 0 10px; font-size: 12px; font-weight: bold;">
Unschedule Resource for 15880-PW
</h1>
</div>
</div>
</li>
{... removed for brevity ...}
解决方法
编辑：正确解决方案
见：http://www.w3schools.com/css/pr_print_pagebi.asp
所以如果你添加以下到你的CSS应该解决你的问题：
@media print
{
div.pad { page-break-inside:avoid; }
}
不幸的是，这只能在Opera上工作。但是，还有一个页面突破：避免和分页符号：避免可以添加到.pad类中的每个元素，以便在浏览器之间产生相同的结果。
@media print
{
div.pad * {
page-break-after:avoid;
page-break-before:avoid;
}
}
http://www.w3schools.com/Css/pr_print_pagebb.asp
http://www.w3schools.com/css/pr_print_pageba.asp
旧答案：
这听起来像是在一个不适合页面的页面上设计一些东西。我会尝试添加一个样式表与media =“打印”…
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" />
