思路：
首先先设一个div把文章内容放进去，超出部分进行隐藏，column-width:300px;用这个属性把这个文章内容按列分开，每一列300px，，翻页时用这个属性transform:translateX(0px);进行左右移动，实现左右翻页，这个很简单，但是判断有点小麻烦。
第一页是向左翻则提示你这已经是第一页了，最后一页时判断那是最后一页。
前者还是蛮简单的，后者我饶了一个圈圈::(要死)::(要死)
开始以为是得到他的宽度，然后除以每一列就可以得到页数了，然后根据页数来判断最后一页，但实际上我得不到我的宽度::(打脸)太难了:@(吐血)，所以我们只能得到她的高度了。

<div id="main"> <div class="box" id="box"> <div id="connent" ref="connent"> <p v-html="contenttext" id="fonts"></p> </div> </div> <button @click="lbox()">左</button> <button @click="rbox()">右</button> </div>

---

先给box设一个死的高度，让这个范围变成可视范围，这个时候connent就能拿到文章内容的高度啦，假设每一页是600px，600px除以这个高度也是可以获得页数的，这个数可能为小数，我们可以用Math.ceil()来获取小数的最大整数，这个整数就是我们的页数啦。
我们在点击右翻时我们在给connent设一个高度，这时候文章内容就会自动排列，然后用transform:translateX(0px);调整里面的像素即可实现这个小小的功能呢。:@(害羞)

下载地址：
index3.rar

里面的一些引入自己去找哦。

演示效果如下：