如何用jQuery / javascript分頁文本？

Question

這是簡短的......

我需要使用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頁......

---

任何幫助都會很可愛！ 謝謝閱讀！

Answer 1

這個概念驗證將起作用（也可以使用css3列），但要注意，有一個CPU成本; 它是DOM密集型的，需要jQuery。

這需要將文本划分為更短的段落（或任何其他標記），但如果文本太大，則應該可以在客戶端進行操作。

偽標記：

ARTICLE
  header, intro etc
  SECTION
    paragraphs, divs, spans etc with (text) content

碼：

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);
}

Answer 2

CSS3假設您的目標瀏覽器支持它，多列布局可以完成這項工作： http ： //caniuse.com/#feat=multicolumn

您需要使用外部div來裁剪文本，內部div使用具有固定寬度和高度的列以及可以修改內部div左邊距的按鈕。

許多功能僅部分支持（根據我的經驗，Opera表現最佳），但對於許多情況應該足夠了。 請參閱http://www.w3.org/TR/css3-multicol/ ，您可以在其中找到許多好的示例（特別是示例XXIII，“多元素外部的分頁和溢出”）。