將連續（上載）的內容放入多頁（divs）中

Question

我的任務是生成一個閱讀器，該閱讀器將上載的HTML文件分成多個頁面，例如Microsoft Word。 但是，我不知道如何檢測內容何時到達“文件”的底部。

上載的文件是包含多個表的報告，因此其大小無法預測。 由於屬性應在新頁面中表示，因此應保留表格樣式。

我用當前代碼創建了一個jsfiddle 。

<div class="paper"> <span>
    Singing is the act of producing musical sounds with the voice, and augments regular speech by the use of both tonality and rhythm.<br /> One who sings is called a singer or vocalist. Singers perform music (Arias, Recitatives, Songs, etc.) that can be sung either with or without accompaniment by musical instruments. <br />Singing is often done in a group of other musicians, such as in a choir of singers with different voice ranges, or in an ensemble with instrumentalists, such as a rock group or baroque ensemble.   <br />
</span>

<table class="table">
    <tr>
        <td colspan="2">ce</td>
    </tr>
    <tr>
        <td>brbr</td>
        <td>brbr</td>
    </tr>
    <tr>
        <td>brbr</td>
        <td>brbr</td>
    </tr>
</table>
<span>       
   Singing is the act of producing musical sounds with the voice, and augments regular speech by the use of both tonality and rhythm.<br /> One who sings is called a singer or vocalist. Singers perform music (Arias, Recitatives, Songs, etc.) that can be sung either with or without accompaniment by musical instruments. <br />Singing is often done in a group of other musicians, such as in a choir of singers with different voice ranges, or in an ensemble with instrumentalists, such as a rock group or baroque ensemble.
</span>
</div>

.paper {
    width:150px;
    height:200px;
    border:#CCC 1px solid;
    overflow:hidden;
    margin:0px 5px 5px 5px;
    padding: 5px;
    box-shadow: 3px 3px 0px #DDD;
}
.table {
    width:100%;
    border:#CCC 1px solid;
    text-align:center;
}

你能告訴我如何實現嗎？

Answer 1

尚未使用包含各種樣式的HTML標記的內容對此進行測試，並且我不確定這樣做的效率如何。 盡管如此，這是一個簡單的版本：

http://jsfiddle.net/7RCr5/5/

#CSS
.page{
    width:200px;
    height:200px;
    margin-right:10px;
    border:1px solid rgb(222, 80, 80);
    float:left;
    overflow:hidden;
}

#Javascript
window.onload = function()
{
    var text      = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
        textarr   = [],
        arrlen    = 0,
        pageno    = 1,
        page      = document.getElementById('page' + pageno),
        maxheight = page.offsetHeight;

    text += " " + text + " " + text; //<-- Test purposes
    textarr = text.split(" ");
    arrlen  = textarr.length;


    for(var i = 0; i < arrlen; ++i)
    {
        page.innerHTML = page.innerHTML + textarr[i] + " ";
        page.style.overflow = 'auto';

        if(page.scrollHeight > maxheight)
        {
            page.style.overflow = 'hidden';
            page.innerHTML = page.innerHTML.substr(0, page.innerHTML.length - (textarr[i].length + 1));

            var parent = page.parentNode; 

            page = page.cloneNode(false);
            page.id = 'page' + ++pageno;
            page.innerHTML = page.innerHTML + textarr[i] + " ";

            parent.appendChild(page); 
        }

        else page.style.overflow = 'hidden';
    }
};

#HTML
<div id="pages">

    <div class="page" id="page1"></div>

</div>

我希望這會有所幫助。