![NEWPAGE]( "NEWPAGE")
本文介绍了文本分页内的DIV与图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我想在某些div中对文本进行分页，因此它将符合允许的区域 逻辑非常简单： 1.将文本拆分为单词 2.逐字加入并计算元素高度 3.如果我们超过高度 - 创建下一页 b $ b 它工作的很好 这里是我用过的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/74W4N/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/74W4N/19/ I want to paginate a text in some div so it will fit the allowed areaLogic is pretty simple:1. split text into words2. add word by word into and calculate element height3. if we exceed the height - create next pageIt 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 elementfunction 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与图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 10-10 00:40