Question

我目前正在尝试避免div中间的分页符。我希望它只有在div中间发生分页时才会中断。但是我尝试过page-break-inside：避免，它什么都不做。我不能在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>

以下是Google Chrome中打印的屏幕截图。

Printing line break

Answer 1

尝试

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

或此（取决于浏览器）

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

for chrome试试这个

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

对于IE11来说，似乎有问题，尝试围绕p

page-break-after不能使用div标签。试用p或br标签

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

Answer 2

Terns out表示嵌入div不支持page-break-inside：避免。为了完成我想要做的事情，我需要将我的html转换为一个表格并用一个div包围它。这也适用于FF（38.0.5），IE（11）和Chrome（43.0.2357.130 m）

<div style="page-break-inside: avoid;">
   <table style="width:100%;">
       <tbody>
       <tr>
            <td style="width:400px;">
                 <h2>**Delinquency Notice** as of 12/31/13</h2>
            </td>
            <td style="width:400px;">
                 <h2>Recent Account History</h2>
            </td>
        </tr>
        <tr>
            <td class="padding"><b>You are late on your mortgage payments.</b> 
                    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.<br/><br/>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.
            </td>
            <td class="padding">
                <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>
                <br/><b>Total: $6,495.86 due. You must pay this amount to bring your loan current</b></td>
        </tr>
        </tbody>
    </table>
</div>

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

2 个答案: