时间戳

首页 > 解决方案 > 如何在浏览器中对文本进行分页？

javascript - 如何在浏览器中对文本进行分页？

问题描述

假设我在变量中有 War and Peace 的文本wandp。

有没有什么方法可以编写一个函数，以便page(n)返回正确数量的文本来填充当前浏览器窗口，n其中wandp.

我希望文本是正确的数量，即没有重要的空白或滚动条。

我想我正在寻找浏览器电子书算法的文本描述。

PS 我敢肯定章节和其他布局功能有一些复杂性，但他们可以等待。

标签： javascripthtmlcssbrowserscrollbar

解决方案

借用Work out how many characters can fit into DIV with JavaScript的想法，我将创建一个隐藏<div>元素并将该元素的宽度设置为等于浏览器窗口的宽度。然后，我将创建一个函数来添加文本wandp，在添加时检查<div>元素的高度，直到<div>元素的高度等于浏览器窗口的高度。

它可能看起来像这样：

HTML：

...
<div id="normalDiv" style="width: 100%; overflow: hidden"></div>
<div id="hiddenDiv" style="visibility: hidden; width: 100%;"></div>
...

Javascript：

...
var targetHeight = window.innerHeight - 40; //browser window height minus height of last line of text
var wandp = 'The entire content of War and Peace...';
var startChar = 0;
var endChar = 0;
for(var i=startChar; i < wandp.length; i++){
    endChar = i;
    document.getElementById('hiddenDiv').innerHTML += wandp.charAt(i);
    if (document.getElementById('hiddenDiv').clientHeight > targetHeight){
        endChar--;
        break;
    }
}
document.getElementById('normalDiv').innerHTML = wandp.substring(startChar, endChar);
...

请记住，这将导致文本被截断，因为它将上升到适合约束的绝对最后一个字符。您需要有一点创意才能以合理的字符结束页面上的文本（遇到的最后一个句点，遇到最后一个空白之前等）。

推荐阅读