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

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 标签中，然后检查它的 innerHeight。

Answer 2

基本上，您需要的内容可以写在一行中，假设全文最初包含在一个 <p> 中，给该段落一个 id 并以此开始您的 .ready 回调：

$('#toPaginate').replaceWith('<p>'+$('#toPaginate').html().match(/(.{0,200})\b/g).join('</p><p>')+'</p>');

其中toPaginate 是包含文本的段落的ID。如果有多个段落，只需使用一个类：

$('.toPaginate').each(function()
{
    $(this).replaceWith('<p>'+$(this).html().match(/(.{0,200})\b/g).join('</p><p>')+'</p>');
});

哦，这段代码会将您的文本分成最多 200 个字符的块。只需将正则表达式 (/(.{0,200})\b/) 中的最大值从 200 更改为您需要的任何长度。
我已经用一些 cmets 和一个使用 IIFE 的示例设置了 this fiddle。

要使 “页面” 的大小取决于宽度和高度，您始终可以使用 em 测量值。 1em === 1 个字符的大小。换句话说：

function paginate(width, height)
{
    var maxChars = width*height;
    maxChars = new RegExp('(.{0,'+maxChars+'})\\b','g');
    $('#toPaginate').replaceWith('<p>'+$('#toPaginate').html().match(maxChars).join('</p><p>')+'</p>');
}

使用类选择器，将$('toPaginate') 替换为this，并使用paginate 作为.each 回调函数，就是这样，显然width 和height 不会被传递，但是通过使用闭包，您可以正确设置它们：

$('.toPaginate').each((function(width,height)
{
    var maxChars = new RegExp('(.{0,'+(width*height)+'})\\b','g');
    return function()
    {
        $(this).replaceWith('<p>'+$(this).html().match(maxChars).join('</p><p>')+'</p>');
    };
}(50, 20)));//pass dimensions here

检查this updated fiddle查看它的实际效果，这次我采取了先检查它的预防措施：s...