gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:37:34 27 4
gpt4 key购买 nike

假设我在变量 wandp 中有 war 与和平的文本。

有没有办法编写一个函数,使 page(n) 返回正确数量的文本以填充当前浏览器窗口,其中 n 是一个wandp 中的字符索引。

我希望文本的数量正确,即没有明显的空白或滚动条。

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

附言我敢肯定,章节和其他布局功能会很复杂,但他们可以等一等。

最佳答案

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

请记住,这将导致 chop 文本,因为它会上升到符合约束条件的绝对最后一个字符。您需要有点创意,以便以合理的字符结束页面上的文本(遇到的最后一个句号、遇到的最后一个空格之前等)。

关于javascript - 如何在浏览器中对文本进行分页?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53283976/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com