CSS 可以通過(guò)分頁(yè)設(shè)置控制一個(gè)頁(yè)面的版式,以便在打印或者 PDF 轉(zhuǎn)換時(shí)輸出多頁(yè)文檔。對(duì)于已經(jīng)分頁(yè)的文檔,CSS 還允許控制跨頁(yè)項(xiàng)目,如表格行、列表等。
要設(shè)置分頁(yè),需要使用媒體查詢(xún)(media queries)和 CSS 分頁(yè)模塊(CSS Paged Media),這兩個(gè)特性可以讓我們?cè)跇邮奖碇性O(shè)置頁(yè)面尺寸、邊距、斷點(diǎn)、頁(yè)面標(biāo)題和腳注等屬性。
@media print { @page { size: A4 landscape; margin: 1cm; padding: 2.5cm; counter-increment: page; @top-center { content: "Page " counter(page); } @bottom-right { content: "My Website"; } } }
上述代碼定義了一個(gè) print 媒體查詢(xún),即只在打印時(shí)生效。@page
規(guī)則用于設(shè)置頁(yè)面屬性,其中size
指定頁(yè)面尺寸和朝向,margin
指定頁(yè)面邊距,padding
指定主體內(nèi)容的內(nèi)邊距,counter-increment
聲明自定義計(jì)數(shù)器,用于生成頁(yè)面編號(hào)。
@top-center
和@bottom-right
是針對(duì)頁(yè)面的偽元素,分別用于設(shè)置頁(yè)面頂部中心和底部右側(cè)的內(nèi)容。content
屬性用于指定文本和自定義計(jì)數(shù)器等內(nèi)容。
此外,CSS 還允許通過(guò)一些常用樣式設(shè)置控制跨頁(yè)項(xiàng)目的表現(xiàn),例如:
tr { page-break-inside: avoid; } ul, ol { page-break-inside: avoid; page-break-before: always; }
上述代碼使用page-break-inside
屬性控制表格行和列表項(xiàng)跨頁(yè),避免分割導(dǎo)致內(nèi)容不連續(xù);同時(shí),使用page-break-before
屬性使得列表項(xiàng)在頁(yè)面邊緣出現(xiàn)時(shí)自動(dòng)換頁(yè)。其中avoid
值表示避免分頁(yè),always
值表示強(qiáng)制分頁(yè)。
總之,在設(shè)計(jì)分頁(yè)樣式時(shí),應(yīng)考慮打印設(shè)備、紙張大小、文字字號(hào)和行間距等因素,以保證輸出質(zhì)量和可讀性。