javascript - 带图像的 DIV 内的文本分页

Question

我想对某个 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 });
}

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

工作 fiddle :http://jsfiddle.net/74W4N/7/

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

Answer 1

除了要计算更多变量这一事实之外，不仅是单词的宽度和高度，还包括换行符、边距填充以及每个浏览器如何输出所有内容。

然后通过添加图像(如果图像比最大宽度或高度更高或更大，则几乎不可能)，如果图像较小，则它也有边距/填充。它可以从一行的末尾开始，因此再次分解所有内容。基本上，只有在第一页上，您可以简单地通过计算宽度+边距和高度+边距/行高来添加图像。但这需要大量数学才能获得想要的结果。

说我前段时间尝试编写类似的脚本，但由于许多问题和不同的浏览器结果而停止。

现在阅读你的问题，我发现了我不久前读过的一些内容:

-webkit-column-count 

所以我对你的函数采用了不同的方法，省去了所有这些计算。

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

var div=document.getElementsByTagName('div')[0].firstChild,
maxWidth=300,
maxHeigth=200,
div.style.width=maxWidth+'px';
currentHeight=div.offsetHeight;
columns=Math.ceil(currentHeight/maxHeigth);
div.style['-webkit-column-count']=columns;
div.style.width=(maxWidth*columns)+'px';
div.style['-webkit-transition']='all 700ms ease';
div.style['-webkit-column-gap']='0px';
//if you change the column-gap you need to
//add padding before calculating the normal div.
//also the line height should be an integer that
// is divisible of the max height 

这是一个示例

http://jsfiddle.net/HNF3d/10/

在第一页中添加小于最大高度和宽度的图像不会弄乱所有内容。

看起来现在所有现代浏览器都支持它。(使用正确的前缀)