CSS：自動分頁符？

有沒有一種方法可以自動檢測內容何時侵入頁邊距，然後用CSS強制分頁？我有一個具有邊框和一些內容的DIV：CSS：自動分頁符？

<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。謝謝！

來源

2014-01-06 user1505713

你有沒有試着用搜索引擎呢？ http://davidwalsh.name/css-page-breaks – BenM

是的，我已經在那裏登陸了。他似乎用.page-break類選擇器手動強制分頁符，這正是我試圖避免的。 – user1505713

我不認爲有一種方法來分割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| 
+-----------+

來源

2014-01-06 19:29:15 Tomas

CSS：自動分頁符？

回答

相關問題