假设我在变量wandp
中有战争与和平的文本。
有没有任何方法可以编写一个函数,使page(n)
返回准确的文本量来填充当前浏览器窗口,其中n
是wandp
的字符索引。
我希望文本的数量是正确的,即没有明显的空白或滚动条。
我想我正在寻找一个浏览器电子书算法的文本描述。
附言:我相信章节和其他布局功能会很复杂,但它们可以等待。
借用《用JavaScript计算div可以容纳多少个字符》中的一个想法,我会创建一个隐藏的<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);
...
请记住,这将导致截断文本,因为它将一直到符合约束的绝对最后一个字符。为了在页面上以合理的字符结束文本(遇到的最后一个句点、遇到的最后空白之前等(,您需要有一点创造性。