0

我的任务是生成一个阅读器，它将上传的 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;
}

你能告诉我如何实现它吗？

4

1 回答 1

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>

我希望它有点帮助。

于 2013-06-07T10:41:50.750 回答