css如何自动分页 |css 百分比没用

假设大家有一个包含长文本的div，高度为200px，宽度为500px。大家希望将内容分成若干页，每一页的高度为200px，宽度为500px。

<div class="content">
<p>这是第一页内容...</p>
<p>这是第二页内容...</p>
<p>这是第三页内容...</p>
<p>这是第四页内容...</p>
...
</div>

大家可以通过以下几个步骤来实现自动分页：

1.设置div的高度和宽度，以及overflow属性为hidden，这样就将多余的内容隐藏起来，达到了分页的效果。

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

2.设置p标签的页面内间距padding-top和padding-bottom，保证每一页的高度为200px。

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

3.使用:nth-of-type伪类选择器来控制每一页的显示/隐藏。如下代码，将第一页的p标签显示出来，其他的p标签隐藏起来。

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

4.使用JavaScript来控制翻页，例如点击上一页/下一页按钮时，通过改变:nth-of-type伪类的参数来实现跳转到相应的页面。

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();
}
}

通过这几个步骤，大家就可以轻松地实现自动分页了。