CSS：自动分页符？答案

【问题标题】：CSS: Automatic page breaks?CSS：自动分页符？
【发布时间】：2014-01-06 18:55:11
【问题描述】：

有没有办法自动检测内容何时侵犯页边距，然后使用 CSS 强制分页？我有一个有边框和一些内容的 DIV：

<div id="container">
   This content could spill into the bottom margin of the printed page....
</div>

CSS：

#container {
    border: 2px solid black;
}

是否有 @print 规则可以执行以下操作：

+----------+
|          |
|  page 1  |
|          |
| content  |
|          |
| this over|
+----------+

+----------+
|flows and |
|the CSS   |
|makes a   |
|new page  |
|with a    |
|border    |
+----------+

如果可能的话，我想避免编写手动强制中断的规则，一个好的解决方案应该（一直）回到 IE8/旧版 Firefox。谢谢！

【问题讨论】：

你试过用谷歌搜索这个吗？ davidwalsh.name/css-page-breaks
是的，我已经登陆了。他似乎使用 .page-break 类选择器手动强制分页，这是我试图避免的。

标签： html css

【解决方案1】：

我认为没有办法拆分 div 来实现这一点。一种方法是打破内部元素，例如段落。

例如：

<div id="print">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

#print {
    border: 2px solid #000;
}

@media print {
    #print {
        border: 0;
    }

    #print p {
        border: 2px solid #000;
    }

    #print p:last-child {
        page-break-before: always;
    }
}

桌面版本会创建如下内容：

+-----------+
|           |
|  page 1   |
|           |
| content   |
|           |
|with border|
+-----------+

印刷版是：

+-----------+
|           |
|  page 1   |
|           |
| content   |
|           |
|with border|
+-----------+

+-----------+
|           |
|  page 2   |
|           |
| content   |
|           |
|with border|
+-----------+

【讨论】：