javascript – 将文本分割成页面并单独呈现(HTML5)

假设我们有一个长的文本,如罗密欧与朱丽叶,我们想在一个简单的ereader(没有动画,只有页面和自定义字体大小)中呈现这个.有什么办法可以得到这个？

我到目前为止已经提出：

>使用css3列可以将整个文本加载到内存中,以使得单个列占用整个页面的大小来进行样式化.这样做非常难以控制,并且需要将整个文本加载到内存中.
>使用css3区域(任何主要浏览器不支持)将构成与以前的解决方案相同的基本概念,主要区别在于它不会很难控制(因为每个“列”都是一个自包含的元素).
>在画布上绘制文本将允许您准确地知道文本的结尾位置,从而基于此绘制下一页.其中一个优点是您只需要将所有文本加载到当前页面(仍然不好,但更好).缺点是不能与文本进行交互(如选择文本).
>将每个单词放在一个元素中,并给每个元素一个唯一的id(或在javascript中保留一个逻辑引用),接下来使用document.elementFromPoint找到页面上最后一个的元素(单词),然后显示下一页从那个字.尽管这是唯一似乎对我来说是现实的,但由此产生的开销必须是巨大的.

然而没有一个似乎是可以接受的(首先没有给予足够的控制,甚至没有得到它的工作,第二是不支持,第三是困难,没有文本选择,第四个给了一个可笑的开销),所以任何好的方法我没有想到还是解决所提方法的一个或多个缺点的方法(是的,我知道这是一个相当开放的问题,但是越开放,产生任何相关答案的机会就越高)

解决方法

见 my answer到 Wrap text every 2500 characters in a for pagination using PHP or javascript.我结束了 http://jsfiddle.net/Eric/WTPzn/show

引用原始帖子最好我可以：(块引用和代码块不一起玩好)

Just set your HTML to:

<div id="target">...</div>`

Add some css for pages:

#target {white-space: pre-wrap; /* respect line breaks */}
    .individualPage {border: 1px solid black;padding: 5px;}

And then use the following code:

var contentBox = $('#target');
    //get the text as an array of word-like things
    var words = contentBox.text().split(' ');

    function paginate() {
        //create a div to build the pages in
        var newPage = $('<div class="individualPage" />');
        contentBox.empty().append(newPage);

        //start off with no page text
        var pageText = null;
        for(var i = 0; i < words.length; i++) {
            //add the next word to the pageText
            var betterPageText = pageText ? pageText + ' ' + words[i]
                                          : words[i];
            newPage.text(betterPageText);

            //Check if the page is too long
            if(newPage.height() > $(window).height()) {
                //revert the text
                newPage.text(pageText);

                //and insert a copy of the page at the start of the document
                newPage.clone().insertBefore(newPage);

                //start a new page
                pageText = null;
            } else {
                //this longer text still fits
                pageText = betterPageText;             
            }
        }    
    }

    $(window).resize(paginate).resize();

原文地址：https://www.jb51.cc/js/154428.html