仅在必要时强制分页打印页面

Question

仅在必要时强制分页打印页面

12

我目前正在尝试避免在div的中间出现分页。我希望只有在div的中间发生分页时才会分页。但是，我尝试了page-break-inside：avoid，但它没有起作用。我不能在div之前强制进行分页，因为我不知道页面的长度。如果有任何帮助或另一个想法，那就太好了。

这里是我试图避免分页的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中打印页面的截图。打印换行

- Sari Rahal

2个回答

2

原来在page-break-inside:avoid中不支持嵌入div。为了达到我想要的效果，我需要将我的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>

- Sari Rahal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScaisEdge · Accepted Answer

尝试使用

@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>