打印时防止 HTML 元素跨越多个页面

Question

我有以下 HTML，我希望在跨多个页面时不被破坏。问题是，如果我在之前或之后使用分页符，它将把每个元素放在它自己的页面上。我遇到的另一个问题是，如果我在 cell CSS 类或 wrap 类上设置 display: block，则 DIV 或LI还是分手了。我有一个印刷媒体 CSS 文件和一个屏幕 CSS 文件。我想防止

元素及其内容被破坏。

        <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 ...}

Answer 1

编辑：正确的解决方案

请参阅：http://www.w3schools.com/ css/pr_print_pagebi.asp
因此，如果您将以下内容添加到 CSS 中，它应该可以解决您的问题：

@media print
{
    div.pad { page-break-inside:avoid; }
}

所有主要的桌面浏览器现在都支持此功能。

不过，还有 page-break-after:avoid 和 page-break-before:avoid，您可以将它们添加到中的每个元素。 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="print"... 的样式表

<link rel="stylesheet" href="css/print.css" type="text/css" media="print" charset="utf-8" />

，以减少所有这些元素的字体大小、填充等，以便您可以在此之前添加分页符部分并使其适合页面。