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

來源:互聯網
上載者:User
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 還是自己動手去試試 看看 效果。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.