1

是否可以将格式化的文本分成多个框，而无需某人准备文本？我发现了几个对这样的文本进行分页的 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>​​​​
4

2 回答 2

0

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

于 2012-10-09T13:09:39.393 回答
0

基本上，您需要的内容可以写在一行中，假设全文最初包含在 one 中<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 更改为您需要的任何长度。
我也用一些评论和一个使用 IIFE 的例子来设置这个小提琴。

要使“页面”的大小取决于宽度和高度，您始终可以使用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仅此而已，显然不会被传递，但是通过使用闭包，您可以正确设置它们：widthheight

$('.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

检查这个更新的小提琴以查看它的实际效果，这次我采取了先检查它的预防措施：s ...

于 2012-10-09T13:25:54.197 回答