请教各位, 前端技术中有较好的文本分页方案吗?

[CoCoMcRee]

请教各位, 前端技术中, 是否有这样一种方案.
根据区域大小, 比如屏幕宽高, 将较长的一片文章, 分页成多页.
主要是用于小说阅读器上面. 阅读器的左右翻页和仿真翻页需要基于这个分页来做.

[yaphets666]

我觉得这个搞不了 只能粗略的计算一下屏幕高 /行高 要精确整的话 要做一个引擎

[Exin]

1. 确定行高
2. 计算可视范围行数
3. 完整渲染整个章节到 DOM （怕太长可以分章节）
4. 控制滚动行为，每次翻页即滚动可视范围行数的距离

翻页效果可以通过渲染两份 DOM 在翻页时交替来实现

此外碰到图片之类的非文本，要另作计算

[undermoodzyx]

virtual scroll 了解一下，感觉可以给 up 主一点思路

[chnwillliu]

自动分页的话 column 系列 CSS 属性就是专门用来控制文本流分列渲染的，你把容器的高度定为屏幕高度，设定每列宽度为屏幕宽度，让 column-count 自动计算就可以啦。只不过这个无法做到仿真翻页效果，因为你没法单独控制每一列的样式，这个列容器对 CSS 是透明的。

等 CSS Regions 草案有新进展后估计就比较轻松能实现了吧 https://caniuse.com/#feat=css-regions

[CoCoMcRee]

@chnwillliu 感谢