CSS中的頁面分頁特性，指的是將一個長頁面分成多個頁碼以方便用戶的閱讀。使用CSS分頁，可以使用戶不用滾動頁面就可以瀏覽整份文檔，對於一些包含大量文字的長文檔，使用這種技術可以減輕用戶的閱讀負擔。
一、實現頁面分頁的方法
在CSS中，實現分頁一般有兩種方法：一種是使用page-break屬性，另一種是使用column屬性。
1、page-break屬性
page-break屬性用於控制多媒體分頁媒體類型，例如列印和列印預覽。該屬性支持多個值，包括page-break-before、page-break-after、page-break-inside。
.page {
page-break-before: always;
}
上述代碼表示在該元素之前插入頁面分頁。其他值還包括：
- auto：默認值，根據頁面內容自動分頁
- always：強制分頁，並在當前元素前插入分頁符
- avoid：不允許分頁，並將當前元素放在一頁上
2、column屬性
column屬性用於控制文本跨頁分布在幾個列里。該屬性也可以指定列的數量，列與列之間的間隔，以及分組元素之間要強制插入列中斷的位置。
.column {
column-count:3;
column-gap:20px;
}
上述代碼表示將該元素分成3列，並且每列之間的間隔為20px。其他屬性還包括：
- column-width：指定每列的寬度
- column-rule：指定列與列之間的樣式和寬度
- column-span：指定元素跨越幾列
二、使用CSS實現頁面分頁的例子
下面是一個使用CSS實現頁面分頁的例子，我們使用page-break屬性，將一段長文本分成3個頁面：
.content {
width: 600px;
margin: 0 auto;
padding: 20px;
font-size: 18px;
}
p {
margin-bottom: 20px;
}
.page {
page-break-before: always;
}
長文本示例
這是一段長文本，請注意觀察頁面分頁。這是第一頁。
這是第二頁。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/191019.html
微信掃一掃 
支付寶掃一掃 