现在市面上大多小说app的阅读页都能实现阅读翻页，让我们来看看这个效果用h5怎么实现

需求：  有一段长字符串 将其按照屏幕容纳字数进行分页，然后用tab页的形式呈现出来

首先初始化项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

计算基本需要的数据（一行多少字 一页多少行）

获取容器的宽度    由于我这里子元素都设置的100% 所以我只需要获取 最外层wrap的宽度

一行有多少字 = 容器宽度/字体大小 取小值 可获取一行最少有多少字

一页的行数 = 容器高度/行高

一页多少字 = 一行多少字*一页的行数 

如果内容有分行我们用 p标签隔开 用swiper显示在页面上

直接贴代码 目前实现了字符串分页

还有不足的地方就是 如果内容有换行 这个换行不能正确显示

有待改进

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://3.swiper.com.cn/dist/css/swiper.min.css">
</head>
<style>
    body,html{
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 20px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    #wrap{
        height: 100%;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin: 0px auto;
    }
    .swiper-slide {
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
    }
    .swiper-slide p{
        text-indent: 2em;
        margin-top: 1em;
        margin-bottom: 1em;
        line-height: 1.5em;
    }
</style>
<body>
    <div class="wrap" id="wrap">
        <div class="swiper-container">
            <div class="swiper-wrapper" id="pagewrap">
                <div class="swiper-slide">Slide 10</div>
            </div>
        </div>
    </div>
</body>
<script src="https://3.swiper.com.cn/dist/js/swiper.min.js"></script>
<script>
    const readObj = {
        title:"标题",
        content:"PHP原始为Personal Home Page的缩写，已经正式更名为PHP: Hypertext Preprocessor。自20世纪90年代国内互联网\r\n开始发展到现在，互联网信息几乎覆盖了我们日常活动所有知识范畴，并逐渐成为我们生活、学习、工作中必不可少的一部分。据统计，从2003 年开始，我国的网页规模基本保持了翻番的增长速度，并且呈上升趋势。PHP 语言作为当今最热门的网站程序开发语言，它具有成本低、速度快、可移植性好、 内置丰富的函数库等优点，因此被越来越多的企业应用于网站开发中。但随着互联网的不断更新换代，PHP语言也出现了不少问题。根据动态网站要求，PHP语言作为一种语言程序，其专用性逐渐在应用过程中显现，其技术水平的优劣与否将直接影响网站的运行效率。其特点是具有公开的源代码， 在程序设计上与通用型语言，如C语言相似性较高，因此在操作过程中简单易懂，可操作性强。同时，PHP语言具有较高的数据传送处理水平和输出水平，可以广泛应用在Windows系统及各类Web服务器中。如果数据量较大，PHP语言还可以拓宽链接面，与各种数据库相连，缓解数据存储、检索及维护压力。随着技术的发展，PHP 语言搜索引擎还可以量体裁衣，实行个性化服务，如根据客户的喜好进行分类收集储存，极大提高了数据运行效率。对于非常小的项目，PHP是一个十分符合人意的编程语言。 但是对于较大的和更为复杂的项目，PHP 就显出它的薄弱了。所以，针对PHP暴露出的一系列缺点问题，我们应当不断地摸索之后，然后找到某些问题的解决方案。一个开源的语言十分流行是一件好事。希望所有的问题能有一天得到解决，然后我们就将拥有一个开源语言，它既开源，又好用。"
    }
    let wrapFontSize = 20           // 默认字体大小
    let wrapLineHeight = 1.5*wrapFontSize //默认行高
    let wrapWidth = wrap.offsetWidth  // 容器宽度
    let wrapHeight = wrap.offsetHeight  // 容器高度
    let lineFontNum = Math.floor(wrapWidth/wrapFontSize)  // 行字数
    let pageLineNum = Math.floor(wrapHeight/wrapLineHeight)      //页行数
    let pageFontNum = lineFontNum*pageLineNum
    let pageNum = Math.ceil(readObj.content.length/pageFontNum) //总页数
    console.log(readObj.content.length);
    let pagehtml = '<div class="swiper-slide"><p>'
    for(let i = 0;i<pageNum;i++){
        let pagefont = readObj.content.substr(i*pageFontNum,pageFontNum)
        console.log(pagefont)
        pagehtml  = pagehtml + pagefont+'</p></div>'
        if (i != pageNum-1){
            pagehtml = pagehtml+'<div class="swiper-slide"><p>'
        }
    }
    pagewrap.innerHTML = pagehtml
    var swiper = new Swiper('.swiper-container');

</script>
</html>