仅在打印期间必要时强制分页

Question

我目前正试图避免在 div 中间出现分页符。我希望它只有在分页符发生在 div 中间时才中断。但是我已经尝试过 page-break-inside: avoid 并且它什么都不做。我不能在 div 之前强制分页，因为我不知道页面会持续多长时间。任何帮助或其他想法都会很好。

这是我试图避免分页的潜水：

<div style="page-break-inside: avoid;">
        <h2 style="height:18px;">
            <span>
                <div style="width:52%; float:left;">**Delinquency Notice** as of 12/31/13</div>
                <div style="width:48%; float:left;">Recent Account History</div>
                <div styly="clear:both;"/>
            </span>
        </h2>
        <div>
            <div class="leftColumn">
                <div class="small_padding">
                    <span class="bold_text">
                        You are late on your mortgage payments.
                    </span>
                    As of 4/17/2015, you are 106 days late on your mortgage payments. 
                    Failure to bring your loan current may result in fees and 
                    foreclosure -- the loss of your home.
                    <div class="small_top_padding">
                        If you are experiencing financial difficulty, HUD (U.S. Dept 
                        of Housing and Urban Development) approved counseling agents 
                        are available to provide mortgage and foreclosure counseling 
                        assistance. Refer to the HUD disclosure section on the 
                        statement front for contact information.
                    </div>
                </div>
            </div>
            <div class="rightColumn">
                <div class="recent_history_body">
                    <ul style="list-style-type: disc;">
                        <li>Payment due 12/01/2014: Fully paid on 11/30/2014</li>
                        <li>Payment due 1/01/2015: Unpaid balance of $1,290.02</li>
                        <li>Payment due 2/01/2015: Fully paid on 1/31/2015</li>
                        <li>Payment due 3/01/2015: Fully paid on 2/28/2015</li>
                        <li>Payment due 4/01/2015: Fully paid on 3/17/2015</li>
                        <li>Current payment due 5/01/2015: $1,290.02</li>
                    </ul>
                    <div class="recent_history_total">
                        Total: $6,495.86 due. You must pay this amount to bring your loan current.
                    </div>
                </div>
            </div>
        </div>
    </div>

这是谷歌浏览器打印的屏幕截图。

Answer 1

尝试

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

或者这个（取决于浏览器）

@media print
{
    div.pad * { 
        page-break-after:avoid;
        page-break-before:avoid;
    }
}

对于 chrome 试试这个

  div.page
  {
    page-break-after: always;
    page-break-inside: avoid;
  }

对于 IE11，div 似乎有问题，请尝试用 ap 包围

page-break-after 不适用于 div 标签。尝试 ap 或 br 标签

 <p style="page-break-before: always">&nbsp;</p>

Answer 2

发现 page-break-inside:avoid 不支持嵌入 div。为了完成我想要做的事情，我需要将 html 转换为表格并用单个 div 包围它。这也适用于 FF(38.0.5)、IE(11) 和 Chrome(43.0.2357.130 m)

\n\n

<div style="page-break-inside: avoid;">\n   <table style="width:100%;">\n       <tbody>\n       <tr>\n            <td style="width:400px;">\n                 <h2>**Delinquency Notice** as of 12/31/13</h2>\n            </td>\n            <td style="width:400px;">\n                 <h2>Recent Account History</h2>\n            </td>\n        </tr>\n        <tr>\n            <td class="padding"><b>You are late on your mortgage payments.</b>\xc2\xa0\n                    As of 4/17/2015, you are 106 days late on your mortgage payments.\xc2\xa0\n                    Failure to bring your loan current may result in fees and\xc2\xa0\n                    foreclosure -- the loss of your home.<br/><br/>If you are experiencing financial difficulty, HUD\n                    (U.S. Dept\xc2\xa0\n                    of Housing and Urban Development) approved counseling agents\xc2\xa0\n                    are available to provide mortgage and foreclosure counseling\xc2\xa0\n                    assistance. Refer to the HUD disclosure section on the\xc2\xa0\n                    statement front for contact information.\n            </td>\n            <td class="padding">\n                <ul style="list-style-type: disc;">\n                    <li>Payment due 12/01/2014: Fully paid on 11/30/2014</li>\n                    <li>Payment due 1/01/2015: Unpaid balance of $1,290.02</li>\n                    <li>Payment due 2/01/2015: Fully paid on 1/31/2015</li>\n                    <li>Payment due 3/01/2015: Fully paid on 2/28/2015</li>\n                    <li>Payment due 4/01/2015: Fully paid on 3/17/2015</li>\n                    <li>Current payment due 5/01/2015: $1,290.02</li>\n                </ul>\n                <br/><b>Total: $6,495.86 due. You must pay this amount to bring your loan current</b></td>\n        </tr>\n        </tbody>\n    </table>\n</div>\n

\n