1

つまり、HTMLがたくさんあるとすると、特定の要素の最大の高さは固定数であると言いたいと思います。要素を複数の要素にどのように分割しますか？それぞれの要素の高さは、要素の制限ごとに必要な高さよりも高くありませんか？これは明らかにウィンドウの幅に依存するため、要素の高さが目的の高さを超えるように十分に狭いウィンドウがあると想定します。

皮切りに

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

で終わる

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type</p>
<p>specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
4

3 に答える 3

1

ページ付けの観点からこの問題に取り組む別の方法は、スクロールオフセットによって要素のビューを実際に「ページ付け」することです。

http://jsfiddle.net/Dr7Rv/

次のコードは、基本的に必要な数のオリジナルの複製を作成し、スクロールすることでコンテンツのビューを毎回オフセットします。これにより、要求したとおりに、好きなように遊んだり配置したりするための個別の要素が得られます。これが機能する方法のために、私はコードがピクセルの高さまたは行数をサポートするようにしました-行数がより良く見えるからです。

$.fn.createPagedClones = function(measure, type){
  /// setup vars
  var p = $(this), i = 0, c, t, h = p.innerHeight();
  /// handle lines conversion to px
  ( type == 'lines' ) && ( measure *= parseFloat(p.css('line-height')) || 22 );
  /// create a re-usable css object
  c = {"height": measure+"px", "overflow": "hidden"};
  /// step each division and create an offset view
  do{
    /// clone our original, and create a new view by scroll
    t = ( t ? p .clone() .insertAfter(t) : p ) .css(c) .scrollTop(i);
    /// increment i
    i += measure;
    /// stop if we've done enough
  }while( Math.round(i) < h );
}

$(function(){    
  //$('.target-p-tag').createPagedClones(50, 'px');
  $('.target-p-tag').createPagedClones(3, 'lines');
});

理論的には、上記を変更して、コードが常に元のコードで機能するようにすることができます。つまり、ページネーションシステムは、ページごとにコンテンツをほぼスクロールします。ただし、このバージョンでは、各ページを好きな場所に配置できます...必要に応じて並べて表示することもできますが、画像などのランダムなサイズの要素がある場合は、少し奇妙に見える可能性があります。

于 2012-11-30T18:07:42.570 に答える
1

アイデアを説明する非常にドラフト：

http://jsbin.com/irewop/2/edit

内部でhtmlを使用する場合は、タグを壊さずにチャンクを分割する正しいロジックが必要であると想定します。おそらくdomParser https://developer.mozilla.org/en-US/docs/DOM/DOMParserまたは外部ライブラリを使用します。

于 2012-11-28T21:18:33.420 に答える
1

これは最善の解決策ではないかもしれませんが、うまく機能しているようです。

var height = 100;

$("p").each(function() {
    var words = this.innerHTML.split(" "),
        $p = $(this).empty();

    for (var i = 0; i < words.length; i++) {
        if ($p.height() > height) {
            $p = $p.text(function(i, val) {
                return val.split(" ").slice(0, -2).join(" ");
            }).clone().empty().appendTo("div");
            i--;
        }
        $p[0].innerHTML += words[i] + " ";
    }
});​

現在のコードdivには、要素のコンテナがあり<p>ます。

デモ：http： //jsfiddle.net/RubCq/

于 2012-11-28T21:18:51.370 に答える