如何使用jQuery/javascript对文本进行分页？ 这是简介。。。

我需要使用jQuery或javascript对大量文本进行分页。 现在我已经考虑过进行字符计数等，但问题是我没有使用单空格文本，所以这是行不通的

相反，我使用的是动态输入的文本（直接来自我最好的朋友wordpress）

以下是设置：

---

---

我将文本放在名为bodytext的div中，该div的溢出设置为auto。以下是它的样式：

.bodytext {
width: 465px;
height: 454px;
display: block;
position: absolute;
display: block;
margin: 136px 25px;
font-family: 'Gentium Basic', serif;
color: #141414;
line-height: 1.5;
line-height: 1.5;
font-size: 17px;
overflow: hidden;
}

无论如何。。。文本溢出

我想做的是创建一系列div（带有bodytext类），它们彼此相邻，我可以将按钮连接起来在它们之间切换

不过，我发现了一个很好的信息：每隔18行我就需要创建一个新的div

但我不知道如何解决这个问题。

我还需要它能够处理大量的文本。。。一次可能多达1000个单词。。。结果是10页

---

任何帮助都会很好！

---

谢谢你的阅读

CSS3多列布局可以完成这项工作，前提是您的目标浏览器支持它：

您需要裁剪文本的外部div，具有固定宽度和高度的列的内部div，以及修改内部div左侧边距的按钮

---

许多功能只得到部分支持（根据我的经验Opera的性能最好），但对于许多情况来说，它应该足够了。请参阅在哪里可以找到许多好的示例（特别是示例二十三，“分页和multicl元素外部溢出”）。

此概念验证将起作用（也适用于css3列），但请注意，这会带来CPU成本；它是DOM密集型的，需要jQuery

这需要将文本划分为较短的段落（或任何其他标记），但如果文本的块太大，甚至可以在客户端这样做

伪标记：

ARTICLE header, intro etc SECTION paragraphs, divs, spans etc with (text) content 文章 标题、介绍等 部分 包含（文本）内容的段落、div、span等 代码：

函数paginate（）{
var screen_height=$（window.height（）；
var最大页面高度=屏幕高度*0.8；
var articles=$（'article'）.toArray（）.map（函数（节点）{
节点=$（节点）；
var sections=node.find（'section'）；
返回{
节点：节点，
章节：章节，
sectionChildren:sections.children（），
};
});
函数appendNewSection（文章）{
变量节=$（''）
第条.附加（节）；
返回段；
}
功能重新分页（文章）{
article.sections.detach（）；//重要魔术
var section=appendNewSection（article.node）；
//克隆'sectionChildren'并附加到DOM
article.sectionChildren.clone（）.each（函数（\u，子函数）{
child=$（child）；
if（section.height（）>最大页高）{
section=appendNewSection（article.node）；
}
if（child.is（'ul'）| child.is（'ol'））{
//将列表拆分为较短的列表
//注意！此方法也可用于拆分长段落。。。
var list_children=child.children（）；
list_children.detach（）；//重要魔法
var blueprint=child.clone（）；//空列表blueprint
变量列表=子项；
第.节附加（清单）；
列出子项。每个（函数（\u，列出子项）{
if（section.height（）>最大页高）{
//用新列表追加新节，并继续在其中追加'list_children'
section=appendNewSection（article.node）；
list=blueprint.clone（）；
第.节附加（清单）；
}
list.append（list\u child）；
});
}
否则{
第3节附加（儿童）；
}
});
}
//重新分页文章
确认（'Paginate articles to screen height？'）和&articles.filter（重新分页）；
}

当我不得不这么做时，请参考这个，我使用了这个jQuery插件：这是我遵循的示例：如果需要更多信息，请告诉我。

function paginate() {
  var screen_height = $(window).height();
  var max_page_height = screen_height * 0.8;

  var articles = $('article').toArray().map(function(node) {
    node = $(node);
    var sections = node.find('section');

    return {
      node: node,
      sections: sections,
      sectionChildren: sections.children(),
    };
  });

  function appendNewSection(article) {
    var section = $('<section class="columns page">')
    article.append(section);
    return section;
  }

  function re_paginate(article) {
    article.sections.detach(); // Important magic
    var section = appendNewSection(article.node);

    // Clone `sectionChildren` and append to DOM
    article.sectionChildren.clone().each(function(_, child) {
      child = $(child);

      if (section.height() > max_page_height) {
        section = appendNewSection(article.node);
      }

      if (child.is('ul') || child.is('ol')) {
        // Split list into shorter lists
        // NOTE! This approach can also be used to split long paragraphs...
        var list_children = child.children();
        list_children.detach(); // Important magic
        var blueprint = child.clone(); // Empty list blueprint
        var list = child;

        section.append(list);

        list_children.each(function(_, list_child) {
          if (section.height() > max_page_height) {
            // Append a new section with a new list and continue appending `list_children` therein
            section = appendNewSection(article.node);
            list = blueprint.clone();
            section.append(list);
          }
          list.append(list_child);
        });
      }
      else {
        section.append(child);
      }
    });
  }

  // Re-paginate articles
  confirm('Paginate articles to screen height?') && articles.filter(re_paginate);
}