javascript - 如何对可变长度的文本进行分页？

Question

是否可以将格式化文本分成多个框，而无需由某人准备文本？我发现了几个 jQuery 插件可以对这样的文本进行分页:

<div>
  <p>page 1</p>
  <p>page 2</p>
</div>
$("div").paginate();

但我想根据页面高度和宽度对文本进行分页:

<p>page 1<br/>page 2</p>
$("p").paginate({ width: 20, height: 20 });

这样分页就灵活了，没人需要知道在哪里设置<p></p> .

更具体地说:我想将 html 格式的文本拆分为多个固定大小的页面(例如 100x200px)。问题是我不知道输出文本(解析的 html 文本)的真实高度，因此我无法每 x 个字符分割文本(也因为这可能会破坏 html 标记)

示例文本(tinymce 输出):

<div id="toPaginate">
<h2>Lorem ipsum dolor sit amet,</h2>
<p>consetetur sadipscing elitr, sed diam&nbsp;nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</p>
<ul>
<li>erat,</li>
<li>sed</li>
<li>diam</li>
<li>voluptua.</li>
</ul>
<p>At vero eos et accusam et justo duo dolores et ea <strong>rebum</strong>. <em>Stet clita kasd gubergren, no sea takimata sanctus est</em> Lorem ipsum dolor sit amet.</p>
<h1>Lorem ipsum dolor sit amet,</h1>
<p>consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>​​​​

Answer 1

不确定我是否理解你在这里想做什么。但是如果您想以一定的高度/文本长度分割一篇文章或类似文章，您可能需要尝试将文本的 X 个字符插入到 p 标记中，然后检查它的内部高度。