在web開發(fā)中，我們常常需要將長文本內(nèi)容分頁展示，這時(shí)候css就可以發(fā)揮它的自動(dòng)分頁功能了。

假設(shè)我們有一個(gè)包含長文本的div，高度為200px，寬度為500px。我們希望將內(nèi)容分成若干頁，每一頁的高度為200px，寬度為500px。

<div class="content">
<p>這是第一頁內(nèi)容...</p>
<p>這是第二頁內(nèi)容...</p>
<p>這是第三頁內(nèi)容...</p>
<p>這是第四頁內(nèi)容...</p>
...
</div>

我們可以通過以下幾個(gè)步驟來實(shí)現(xiàn)自動(dòng)分頁：

1.設(shè)置div的高度和寬度，以及overflow屬性為hidden，這樣就將多余的內(nèi)容隱藏起來，達(dá)到了分頁的效果。

.content {
width: 500px;
height: 200px;
overflow: hidden;
}

2.設(shè)置p標(biāo)簽的頁面內(nèi)間距padding-top和padding-bottom，保證每一頁的高度為200px。

.content p {
padding-top: 0px;
padding-bottom: 200px;
}

3.使用:nth-of-type偽類選擇器來控制每一頁的顯示/隱藏。如下代碼，將第一頁的p標(biāo)簽顯示出來，其他的p標(biāo)簽隱藏起來。

.content p:nth-of-type(1) {
display: block;
}
.content p:nth-of-type(n+2) {
display: none;
}

4.使用JavaScript來控制翻頁，例如點(diǎn)擊上一頁/下一頁按鈕時(shí)，通過改變:nth-of-type偽類的參數(shù)來實(shí)現(xiàn)跳轉(zhuǎn)到相應(yīng)的頁面。

function prevPage() {
var currentPage = parseInt(document.querySelector('.content p:visible').index());
if (currentPage >1) {
document.querySelector('.content p:nth-of-type(' + currentPage + ')').hide();
document.querySelector('.content p:nth-of-type(' + (currentPage - 1) + ')').show();
}
}
function nextPage() {
var currentPage = parseInt(document.querySelector('.content p:visible').index());
var pageCount = document.querySelectorAll('.content p').length;
if (currentPage< pageCount) {
document.querySelector('.content p:nth-of-type(' + currentPage + ')').hide();
document.querySelector('.content p:nth-of-type(' + (currentPage + 1) + ')').show();
}
}

通過這幾個(gè)步驟，我們就可以輕松地實(shí)現(xiàn)自動(dòng)分頁了。