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

不确定我是否理解你在这里尝试做什么。但是如果你想在certen hight / text length分割一篇文章或类似文件，你可以尝试将文本的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更改为您需要的任何长度我已经设置了this fiddle一些评论和一个使用IIFE的例子。

要使“pages”的大小取决于宽度和高度，您始终可以使用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和{ {1}}不会被传递，但通过使用闭包，您可以正确设置它们：

height

检查this updated fiddle以查看它的实际效果，这次我已采取预先检查的方式：s ...

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

2 个答案: