5

これが簡単なことです...

jQueryまたはjavascriptを使用して非常に大量のテキストをページ付けする必要があります。今、文字カウントなどを考えましたが、問題は、モノスペーステキストを使用していないため、機能しないことです。

代わりに、動的に入力されたテキストを使用しています（親友のワードプレスから直接）。

設定は次のとおりです。

私のセットアップ

オーバーフローがautoに設定されているbodytextというdivにテキストを配置しました。スタイリングは次のとおりです。

.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ページになります...

どんな助けでも素敵でしょう！読んでくれてありがとう！

4

2 に答える 2

1

この概念実証は (css3 列でも) 機能しますが、CPU コストがかかることに注意してください。これは DOM 集中型であり、jQuery が必要です。

これには、テキストを短いパラグラフ (またはその他のタグ) に分割する必要がありますが、テキストが大きすぎるチャンクの場合は、クライアント側でも実行できるはずです。

疑似マークアップ:

論文
  ヘッダー、イントロなど
  セクション
    (テキスト) コンテンツを含む段落、div、スパンなど

コード：

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);
}
于 2015-12-28T20:27:34.377 に答える
0

CSS3 の複数列レイアウトは、ターゲット ブラウザーがサポートしていると仮定して機能します: http://caniuse.com/#feat=multicolumn

テキストをトリミングする外側の div、幅と高さが固定された列を持つ内側の div、および内側の div の左マージンを変更するボタンが必要です。

多くの機能は部分的にしかサポートされていません (私の経験によると、Opera が最高のパフォーマンスを発揮します) が、多くの場合はそれで十分です。多くの良い例を見つけることができるhttp://www.w3.org/TR/css3-multicol/を参照してください(特に例 XXIII、「マルチコル要素の外側のページネーションとオーバーフロー」)。

于 2012-11-06T12:40:05.333 に答える