html - CSS:自动分页符？

Question

有没有一种方法可以自动检测内容何时侵犯了页边距，然后使用 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/旧版 Firefoxes。谢谢!

Answer 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|
+-----------+