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

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 的问题，请尝试用 p 环绕

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

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