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 /更早的Firefox。谢谢！

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

CSS：自动分页？

1 个答案: