Question

所以说你有一堆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>

Answer 1

只是草拟了这个想法：

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

假设您在内部使用html，则需要使用正确的逻辑来分割块，而不是使用domParser https://developer.mozilla.org/en-US/docs/DOM/DOMParser或某些外部库。

Answer 2

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

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>元素的容器。

DEMO： http://jsfiddle.net/RubCq/

Answer 3

从分页的角度来看，解决这个问题的另一种方法是通过滚动偏移实际“paginate”元素的视图。

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

理论上你可以改变上面所以代码总是在原始代码上工作，这意味着你的分页系统几乎会滚动每页的内容。但是这个版本允许你将每个页面定位在你想要的位置......如果你愿意，你可以将它们并排放置，但是如果你有任何随机大小的元素即图像，这可能看起来有点奇怪。

根据每个标签的最大高度将标签的文本内容拆分为多个标签？

3 个答案: