文本分页内的DIV与图像 [英] Text pagination inside a DIV with image

问题描述

我想在某些div中对文本进行分页，因此它将符合允许的区域

逻辑非常简单：

1.将文本拆分为单词

2.逐字加入并计算元素高度

3.如果我们超过高度 - 创建下一页 b
$ b

它工作的很好< br>

这里是我用过的JS函数：

pre $ 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 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}）;
}


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

'p>工作拨弄： http://jsfiddle.net/74W​​4N/7/

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

解决方案

通过使用jQuery.clone（）方法解决， $ p> function paginate（）{

var section = $（'。section'）;

变种cloneSection = section.clone（）insertAfter（部分）的CSS（{位置： '绝对'，左：-9999，宽度：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 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）; （pageNum> 0）{
contentBox.craftyslide（{height：wantedHeight}）;
}
}
}

if
}

cloneSection.remove（）;
}


现场演示： http://jsfiddle.net/74W​​4N/19/

I want to paginate a text in some div so it will fit the allowed area
Logic is pretty simple:
1. split text into words
2. add word by word into and calculate element height
3. if we exceed the height - create next page

It works quite good

here is JS function i've used:

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

But when i add an image it break everything. In this case text overflows 'green' area.

Working fiddle: http://jsfiddle.net/74W4N/7/

Is there a better way to paginate the text and calculate element height?

解决方案

Solved by using jQuery.clone() method and performing all calculations on hidden copy of original HTML element

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

live demo: http://jsfiddle.net/74W4N/19/

这篇关于文本分页内的DIV与图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！