javascript - HTML 书状分页

标签 javascript html css webkit pagination

如何将 HTML 文件的内容拆分为屏幕大小的 block ,以便在 WebKit 浏览器中对其进行“分页”?

每个“页面”都应显示完整的文本量。这意味着一行文本不能在屏幕的顶部或底部边框被切成两半。

编辑

这个问题最初被标记为“Android”,因为我的目的是构建一个 Android ePub 阅读器。但是,该解决方案似乎仅使用 JavaScript 和 CSS 即可实现,因此我扩大了问题的范围,使其与平台无关。

最佳答案

在 Dan 的回答的基础上,我解决了这个问题,直到现在我一直在努力解决这个问题。 (此 JS 适用于 iOS Webkit,不保证适用于 android,但请告诉我结果)

var desiredHeight;
var desiredWidth;
var bodyID = document.getElementsByTagName('body')[0];
totalHeight = bodyID.offsetHeight;
pageCount = Math.floor(totalHeight/desiredHeight) + 1;
bodyID.style.padding = 10; //(optional) prevents clipped letters around the edges
bodyID.style.width = desiredWidth * pageCount;
bodyID.style.height = desiredHeight;
bodyID.style.WebkitColumnCount = pageCount;

希望这有助于...

关于javascript - HTML 书状分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3636052/

相关文章:

php - index.ctp 有样式但其余页面没有

html - 填充不起作用

javascript - AppendChild 到 IE 中的 iframe

javascript - 使用 $(document) 仅调用一次脚本

javascript - 设置打印纸尺寸的最小高度?

javascript - 在 HTML 中的 onclick 函数参数内发送 php 变量在循环内不起作用

javascript - Thymeleaf 在 Google Analytics 代码上抛出错误

javascript - 悬停时需要数组中项目的索引号

css - CSS 选择器中的 OR 语句

javascript - 如何将新的/更新的innerHTML 附加到没有类或id 的p 标记?