javascript - 我如何将 HTML 内容拆分成适合屏幕的页面？

我正在制作一个电子书阅读器网页应用程序。我从服务器获取一个包含整本书文本的 HTML 格式的长字符串。它看起来是这样的：

<div><p>Alice was beginning....</p></div></div>to get very  ... </div>

我想要的是把这段文字分成几页。我想得到类似这样的效果：

<li id='page1'>... text ...</li>
<li id='page2'>... text ...</li>
...

单页应该填满视口。用户不应该能够滚动书籍文本。相反，他们应该能够使用按钮在页面之间移动。

我需要一些功能来测量所有内容，将其分割成相同最大高度的部分，并为这些部分标注页码。它还必须考虑图片和长段落（可能无法放在单页上）。

我怎样才能完成这一切？

答案＃1

要找出每一部分内容的尺寸，你必须让浏览器实际渲染它，然后再进行测量。此外，如果你想在内容流的中间断开（例如在段落中间），事情会变得相当困难。（如果不将单个字符/单词包裹在元素中，你无法测量它们。）你还必须禁用缩放等功能，以便你的测量具有一定的持久意义。总的来说，HTML 渲染引擎是专门为渲染流式内容而设计的，这几乎与分页内容相反。

然而，有一些分页的方法你可以采用，但它们都没有真正处理整个文本的渲染和测量。

滚动覆盖

我会尝试的一种方法是简单地

• 将所有文本呈现在容器中，
• 以一种使滚动条不可见的方式为容器设置样式（例如通过将其推到屏幕外）,
• 禁用手动滚动，并
• 提供“分页”按钮，使其能够通过编程方式滚动恰好相当于你的“页面”高度。

这个解决方案的优点是实现简单，但它并不完美。图像可能跨越分页显示，用户将无法完整看到它们。

列

我能在短时间内想到的唯一其他方法是使用列。你得

• 将所有文本呈现在容器中，
• 将容器样式设置为“无限”宽，并具有“无限”数量的列，每列的宽度与页面相同,
• 将容器绝对定位在其父元素中，
• 让你的“分页”按钮按页面的宽度水平移动容器。

此解决方案需要支持 columns 的现代浏览器，但使用 columns 可以解决将流内容正确分页的问题。如果可能的话，我建议首先尝试这个方法。