這是第 1 頁的內容
這是第 1 頁的內容
這是第 1 頁的內容
...這是第 10 頁的內容
CSS 分頁怎么實現？
在開發網頁時，經常會遇到需要將一個列表或一堆內容進行分頁展示的情況。這時候，我們就需要使用 CSS 分頁技術了。
一般來說，CSS 分頁的實現方式有兩種。第一種是使用偽元素 `:before` 或 `:after` 來插入分頁符，第二種是使用 CSS3 的 `columns` 屬性來將內容進行分列展示。
1. 使用偽元素 `:before` 或 `:after` 插入分頁符
這種方法適用于需要手動控制分頁符位置的情況。具體實現的代碼如下：
```html```
```css
/* 設置分列樣式 */
.page-wrap {
column-count: 2;
column-gap: 20px;
}
.page-content {
break-inside: avoid; /* 禁止拆分 */
}
/* 設置分頁符樣式 */
@media print {
.page-wrap {
page-break-inside: avoid;
page-break-after: always;
}
}
```
以上就是兩種常用的 CSS 分頁實現方式了，開發者可以根據實際情況選擇其中一種或結合使用。
- 這是第 1 頁的內容
- 這是第 1 頁的內容
- 這是第 1 頁的內容 ...
- 這是第 10 頁的內容