如何在浏览器中对文本分页?

借鉴 Work out how many characters can fit into DIV with JavaScript <div> 并将该元素的宽度设置为浏览器窗口的宽度。然后,我将创建一个函数,从中添加文本 wandp ,检查 < 元素,直到 <部门> 元素等于浏览器窗口高度。

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);
...