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://jsbin.com/irewop/2/edit

假设如果你要在里面使用 html，你需要正确的逻辑，以不破坏标签的方式拆分块，可能使用domParser https://developer.mozilla.org/en-US/docs/DOM/DOMParser或一些外部库。

于 2012-11-28T21:18:33.420 回答
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

也许这不是最好的解决方案，但它似乎工作正常：

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 回答