css：page-break-before:always和page-break-after:always的區別-css教學-PHP中文網

css：page-break-before:always和page-break-after:always的區別

黄舟

發布： 2018-05-15 09:48:40

原創

5007 人瀏覽過

page- break-before和page-break-after CSS屬性並不會修改網頁在螢幕上的顯示，這兩個屬性是用來控製檔案的列印方式。每個列印屬性都可以設定4種設定值：auto、always、left和 right。其中Auto是預設值，只有在有需要時，才需設定分頁符號 (Page breaks)。 page-break-before若設定成always，則是在遇到特定的元件時，印表機會重新開始一個新的列印頁。 page- break-before若設定成left，則會插入分頁符號，直到指定的元件出現在一個左邊的空白頁上。 page-break-before若設定成 right，則會插入分頁符號，直到指定的元件出現在一個右邊的空白頁上。 page-break-after屬性會將分頁符號加在指定元件後，而非之前。在下列程式中您將可以看到這些屬性的設定。

上面的是百度出來的結果
飄紅的那一段，遇到特定元件印表機會重新開始新的列印頁
這個特定元件指的是？
另外這兩個的差別是什麼，沒怎麼看懂

<HTML>
 
<HEAD>
 
<TITLE>Listing 14-4</TITLE>
 
</HEAD>
 
<BODY>
 
<DIV>This is the first DIV.</DIV>
 
<DIV STYLE="page-break-before:always">This is the second DIV.</DIV>
 
<DIV STYLE="page-break-after:always">This is the third DIV.</DIV>
 
<DIV>This is the fourth DIV.</DIV>
 
<DIV STYLE="page-break-before:right">This is the fifth DIV.</DIV>
 
<DIV STYLE="page-break-after:right">This is the sixth DIV.</DIV>
 
<DIV>This is the last DIV.</DIV>
 
</BODY>
 
</HTML>

登入後複製

下面這段程式碼也是過了，用的是IE7 列印預覽裡面效果是一樣的

#before是在盒子模型的前面插入換頁符號
after是在後面。
你可以使用1.html

<style>
h2{page-break-after: always;}
</style>
1
<h2>---这个在前1页---</h2>
2
<h2>---这个在前2页---</h2>

登入後複製

和2.html

<style>
h2{page-break-before: always;}
</style>
1
<h2>---这个在前2页---</h2>
2
<h2>---这个在前3页---</h2>

登入後複製

進行測試就可以看到列印的效果是不同的了

#最直觀的就是用例子去理解。
注意，css定義換行是插入在h2 的前面還是插入在h2 後面

CSS 還是自己動手去試試看看效果。

以上是css：page-break-before:always和page-break-after:always的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

css：page-break-before:always和page-break-after:always的區別