Javascript 带图像的DIV内的文本分页

我想在某个div中对文本进行分页，使其适合允许的区域
逻辑非常简单：
1.将文本拆分为单词
2.逐字添加到并计算元素高度
3.如果我们超过了高度-创建下一页

它工作得很好

下面是我使用过的JS函数：

function paginate() {
    var newPage = $('<pre class="text-page" />');
    contentBox.empty().append(newPage);
    var betterPageText='';
    var pageNum = 0;
    var isNewPage = false;

    var lineHeight = parseInt(contentBox.css('line-height'), 10);

    var wantedHeight = contentBox.height() - lineHeight;

    for (var i = 0; i < words.length; i++) {        
        if (isNewPage) {
            isNewPage = false;
        } else {            
            betterPageText = betterPageText + ' ' + words[i];
        }
        newPage.text(betterPageText + ' ...');
        if (newPage.height() >= wantedHeight) {
            pageNum++;
            if (pageNum > 0) {
                betterPageText = betterPageText + ' ...';
            }

            newPage.text(betterPageText);
            newPage.clone().insertBefore(newPage)            

            betterPageText = '...';
            isNewPage = true;
        } else {            
            newPage.text(betterPageText);
        }        
    }

    contentBox.craftyslide({ height: wantedHeight });
}

函数paginate（）{
var newPage=$（''）；
contentBox.empty（）.append（newPage）；
var betterPageText=''；
var pageNum=0；
var isNewPage=false；
var lineHeight=parseInt（contentBox.css（'line-height'），10）；
var wantedHeight=contentBox.height（）-lineHeight；
对于（var i=0；i=wantedHeight）{
pageNum++；
如果（pageNum>0）{
betterPageText=betterPageText+'…'；
}
newPage.text（betterPageText）；
newPage.clone（）.insertBefore（newPage）
betterPageText=“…”；
isNewPage=true；
}否则{
newPage.text（betterPageText）；
}        
}
craftyslide（{height:wantedHeight}）；
}

但当我添加图像时，它会破坏一切。在这种情况下，文本溢出“绿色”区域

工作小提琴：

---

是否有更好的方法对文本分页并计算元素高度？

根据我的经验，尝试在HTML中计算并重新定位文本几乎是徒劳的。浏览器、操作系统和字体问题之间的差异太多

我的建议是利用

overflow

CSS属性。这与使用高度大小调整相结合，应该允许您定义一个只显示定义行数的

div

块（无论字体大小和类型如何）。结合使用一点javascript来滚动包含的div元素，就可以分页了

我已经在JSFIDLE中拼凑了一个概念的快速证明，您可以在这里看到：

它缺少了一个上一个按钮和一种显示页数的方式，但是这些应该是非常简单的添加

---

编辑：我最初链接到JSFIDLE概念的错误版本，除了有更多的变量需要计算，不仅是单词的宽度和高度，还有新行、边距填充以及每个浏览器输出内容的方式

然后，通过添加图像（如果图像的最大宽度或高度高于或大于最大宽度或高度，则几乎不可能），如果图像较小，则它还具有边距/填充。基本上，只有在第一页，你可以简单地通过计算图像的宽度+边距和高度+边距/线宽来添加图像。但这需要很多数学才能得到想要的结果

说我前一段时间试过写一个类似的脚本，但由于很多问题和不同的浏览器结果而停止了

现在读到你的问题，我遇到了一些我不久前读到的东西：

-webkit-column-count 

所以我对你的函数做了一个不同的方法，省去了所有的计算

不要像我刚才写的那样判断代码。（我在chrome上测试过，其他浏览器需要不同的前缀。）

下面是一个示例

在第一页中添加一个小于最大高度和宽度的图像不会把一切都搞糟

---

现在所有的现代浏览器都支持它。（使用正确的前缀）

通过使用jQuery.clone（）方法并对原始HTML元素的隐藏副本执行所有计算来解决

function paginate() {

     var section = $('.section');

     var cloneSection = section.clone().insertAfter(section).css({ position: 'absolute', left: -9999, width: section.width(), zIndex: -999 });

     cloneSection.css({ width: section.width() });

     var descBox = cloneSection.find('.holder-description').css({ height: 'auto' });

     var newPage = $('<pre class="text-page" />');
     contentBox.empty();
     descBox.empty();
     var betterPageText = '';
     var pageNum = 0;
     var isNewPage = false;

     var lineHeight = parseInt(contentBox.css('line-height'), 10);

     var wantedHeight = contentBox.height() - lineHeight;
     var oldText = '';

     for (var i = 0; i < words.length; i++) {
        if (isNewPage) {
           isNewPage = false;
           descBox.empty();
        }
        betterPageText = betterPageText + ' ' + words[i];

        oldText = betterPageText;

        descBox.text(betterPageText + ' ...');
        if (descBox.height() >= wantedHeight) {

           if (i != words.length - 1) {
              pageNum++;

              if (pageNum > 0) {
                 betterPageText = betterPageText + ' ...';
              }

              oldText += ' ... ';
           }

           newPage.text(oldText);
           newPage.clone().appendTo(contentBox);

           betterPageText = '... ';
           isNewPage = true;
        } else {
           descBox.text(betterPageText);
           if (i == words.length - 1) {
              newPage.text(betterPageText).appendTo(contentBox);
           }
        }
     }

     if (pageNum > 0) {
        contentBox.craftyslide({ height: wantedHeight });
     }

     cloneSection.remove();
}

函数paginate（）{
var section=$（'.section'）；
var cloneSection=section.clone（）.insertAfter（section.css）（{position:'absolute'，left:-9999，width:section.width（），zIndex:-999}）；
css（{width:section.width（）}）；
var descBox=cloneSection.find（'.holder description'）.css（{height:'auto'}）；
var newPage=$（''）；
contentBox.empty（）；
descBox.empty（）；
var betterPageText=''；
var pageNum=0；
var isNewPage=false；
var lineHeight=parseInt（contentBox.css（'line-height'），10）；
var wantedHeight=contentBox.height（）-lineHeight；
var oldText=''；
for（var i=0；i=wantedHeight）{
如果（i！=words.length-1）{
pageNum++；
如果（pageNum>0）{
betterPageText=betterPageText+'…'；
}
oldText+='…'；
}
newPage.text（旧文本）；
newPage.clone（）.appendTo（contentBox）；
betterPageText=“…”；
isNewPage=true；
}否则{
descBox.text（betterPageText）；
if（i==words.length-1）{
text（betterPageText）.appendTo（contentBox）；
}
}
}
如果（pageNum>0）{
craftyslide（{height:wantedHeight}）；
}
cloneSection.remove（）；
}

---

现场演示：

事实上，基于@cocco所做的工作，我找到了一个更简单的解决方案，它也适用于IE9。 对我来说，保持向后兼容性是很重要的，动画等等都是无关紧要的，所以我把它们删掉了。你可以在这里看到：

它的核心是，我不限制高度和目前的水平分页垂直

var parentDiv = div = document.getElementsByTagName('div')[0];
var div = parentDiv.firstChild,
    maxWidth = 300,
    maxHeigth = 200,

    t = function (e) {
        div.style.webkitTransform = 'translate(0,-' + ((e.target.textContent * 1 - 1) * maxHeigth) + 'px)';
        div.style["-ms-transform"] = 'translate(0,-' + ((e.target.textContent * 1 - 1) * maxHeigth) + 'px)';
    };

div.style.width = maxWidth + 'px';
currentHeight = div.offsetHeight;
columns = Math.ceil(currentHeight / maxHeigth);

links = [];
while (columns--) {
    links[columns] = '<span>' + (columns + 1) + '</span>';
}
var l = document.createElement('div');
l.innerHTML = links.join('');
l.onclick = t;
document.body.appendChild(l)

var parentDiv=div=document.getElementsByTagName（'div'）[0]； 瓦迪

var parentDiv = div = document.getElementsByTagName('div')[0];
var div = parentDiv.firstChild,
    maxWidth = 300,
    maxHeigth = 200,

    t = function (e) {
        div.style.webkitTransform = 'translate(0,-' + ((e.target.textContent * 1 - 1) * maxHeigth) + 'px)';
        div.style["-ms-transform"] = 'translate(0,-' + ((e.target.textContent * 1 - 1) * maxHeigth) + 'px)';
    };

div.style.width = maxWidth + 'px';
currentHeight = div.offsetHeight;
columns = Math.ceil(currentHeight / maxHeigth);

links = [];
while (columns--) {
    links[columns] = '<span>' + (columns + 1) + '</span>';
}
var l = document.createElement('div');
l.innerHTML = links.join('');
l.onclick = t;
document.body.appendChild(l)