javascript - 在多个 div 之间拆分时文本被剪裁

Question

this fiddle中的脚本需要一个长文本并将其分解为不同的 div。它通过克隆每个 div 中的整个文本并增加每个页面的页边距来做到这一点，以便只显示所需的文本。像这样:

for (var i = 2; i < page_no + 1; i++) {
    $("#stuff").append("<div id='page" + i + "' class='mydiv'></div>");
    var copy = $("#page1").clone().attr("id", "onecopy").css({
        "margin-top": '-' + (214 * (i - 1)) + 'px',
            "height": (214 * 2 * (i - 1)) + 'px'
    });

    $("#page" + (i)).append(copy);
}

问题是文本被溢出/隐藏属性“chop ”了。

有没有办法让页面上的第一行在被裁剪时被“chop ”，而最后一行在被裁剪时完全显示？

如果能解决这个最烦人的问题，我们将不胜感激。

Answer 1

您可以通过添加 line-height 样式来防止剪裁，这是 mydiv 高度的一个因素。

为避免小数点大小出现问题，我已将您的代码从 214px 更改为 220px，并将 line-height 设置为 22px:

.mydiv {
  width: 200px;
  height: 220px;
  border:solid 1px black;
  overflow:hidden;
  line-height: 22px;
}

$(function () {
  var page_no = Math.ceil($("#fullpage").height() / 220);

  for (var i = 2; i < page_no + 1; i++) {
    $("#stuff").append("<div id='page" + i + "' class='mydiv'></div>");

    var copy = $("#page1").clone().attr("id", "onecopy").css({
      "margin-top": '-' + (220 * (i - 1)) + 'px',
      "height": (220 * 2 * (i - 1)) + 'px'
    });

    $("#page" + (i)).append(copy);
  }
});

Fiddle

---

更新

您复制文本并将其偏移上边距的方法很聪明，但它可能会导致您遇到的裁剪问题。另一种方法是只添加每个“页面”div 所需的文本。

您可以一次添加一个单词，直到它们溢出 div。您可以通过将 div 的 height 与其 scrollHeight 进行比较来测试溢出情况。

下面的代码实现了这一点:

function newPage() {
  pageNo++;
  return $('<div id="page'+pageNo+'" class="mydiv">')
            .appendTo('#stuff');
};

var words= $('#fullpage').text().split(' '),
    pageNo= 0,
    page= newPage(),
    i,
    len;

for(i = 0 ; i < words.length ; i++) {
  len= page.text().length;
  page.append(words[i]+' ');
  if(page[0].scrollHeight > page.height()) {
    page.html(page.text().substr(0,len));
    i--;
    page= newPage();
  }      
}

Fiddle