pre标签中的大量文本导致分页

时间:2009-10-13 14:14:34

标签: html css printing

我的页面中有一个包含相当多文字的预标签。当我在浏览器中预览此页面时,它看起来很好。但是当我打印它时,预标签中的所有内容都会打印在新页面上。就像pre标签导致分页一样。

我正在使用css来自动换行预标记的文本。

以下是一个示例。如果您在浏览器中预览它看起来很好,但如果您进行打印预览,您可以看到预标签中的所有内容如何显示在新页面中。 IE7和FF3中的行为相同。

是否有任何方法可以正确打印?

    <html>
    <head>
        <title>Item</title>
    </head>

    <body>
    <p>Lets put some other stuff here. </p>
    <p>Lets put some other stuff here. </p>
    <p>Lets put some other stuff here. </p>
    <p>Lets put some other stuff here. </p>
    <p>Lets put some other stuff here. </p>
    <p>Lets put some other stuff here. </p>
    <p>Lets put some other stuff here. </p>

    <pre style="overflow-x: auto; width:99%; font-size:14px; font-family:Arial; word-wrap: break-word; white-space: -moz-pre-wrap;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet mauris ipsum, eget porttitor neque. Nunc eget eros eget turpis sagittis tincidunt quis vel leo. Praesent pretium, nisi sit amet ornare iaculis, justo nisi imperdiet libero, nec condimentum lacus metus eu diam. Cras eu eros id justo mollis pulvinar eget quis nisl. Proin gravida rutrum semper. Nunc erat lorem, volutpat at venenatis non, egestas eu magna. Vivamus nec lectus a justo hendrerit placerat. Aenean commodo, sem et facilisis sodales, tellus tortor sagittis ipsum, id interdum tortor velit sit amet massa. Maecenas placerat sollicitudin mollis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse feugiat quam eget erat ornare vel ornare tortor fermentum. Cras at pulvinar turpis. Fusce ut magna eros, ut tristique tortor. Proin pulvinar fermentum massa eu rhoncus. In et sem ante. Sed malesuada dictum ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque enim sapien, pretium eget lacinia sit amet, mattis eget neque. 


Fusce ac nibh non arcu varius sodales ac sed massa. Fusce dapibus tincidunt nisl, et semper justo tincidunt nec. Phasellus rutrum hendrerit velit in posuere. Sed quis tempor urna. Aliquam eget nisl massa. Mauris ac erat vitae tortor molestie venenatis eget pretium velit. Curabitur id congue turpis. Quisque nec interdum nulla. In vitae libero a velit vehicula scelerisque vel nec lacus. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum dictum facilisis neque. 


Pellentesque elit ante, suscipit ut suscipit eu, placerat euismod sapien. Integer eu porttitor sapien. Curabitur sit amet elit at metus rutrum laoreet. Sed dignissim, dui vitae scelerisque imperdiet, est purus mattis urna, eget condimentum urna libero at libero. Praesent feugiat, nisl vitae cursus viverra, magna sem luctus ante, scelerisque vestibulum ligula mauris eget turpis. Nullam eget dapibus ante. Vestibulum interdum tincidunt velit, et tempor arcu euismod id. Donec vitae nibh nulla. Nulla quis mi quis nisl iaculis interdum. Aenean tincidunt felis semper orci scelerisque eget vulputate massa suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Mauris tincidunt, est id suscipit porttitor, ipsum massa ultricies nunc, at tincidunt odio tellus quis est. Morbi vel turpis dolor. Mauris id turpis viverra tellus malesuada mattis a consectetur libero. Suspendisse sed turpis nibh. Cras vulputate arcu et risus fermentum fermentum. 


Nulla molestie diam consequat nisi mollis viverra. Ut non quam erat, sit amet pellentesque metus. Etiam nec sem id nisl scelerisque tristique. Curabitur molestie nibh aliquam justo sollicitudin sodales. Praesent sit amet nunc lobortis diam dignissim venenatis. Ut ipsum quam, rutrum id tempus at, porttitor eget justo. Nulla non malesuada velit. Duis laoreet mi nec turpis adipiscing lacinia. Duis nec libero massa. Cras elit felis, commodo sit amet tincidunt ut, commodo vitae augue. Nulla vitae magna ut lacus aliquam malesuada quis eu tellus. Maecenas aliquet urna tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 


Mauris in lorem vel leo tempus eleifend. Nunc augue mauris, pellentesque quis blandit eget, ultricies nec mauris. Nullam posuere laoreet elit, vitae ullamcorper lorem bibendum at. Maecenas aliquet aliquet ligula vitae rhoncus. Curabitur est diam, commodo a porttitor in, imperdiet et lorem. Proin iaculis fringilla tortor sed bibendum. Nullam facilisis mauris et metus interdum tristique. Sed fermentum erat justo, eget rhoncus nibh. Fusce aliquam feugiat leo sodales condimentum. Maecenas tincidunt odio nec dui consequat sit amet dictum felis molestie. Ut id feugiat velit. Maecenas eget lacus at ligula porttitor consequat. Vestibulum ultrices, ante ut ornare hendrerit, metus mauris pellentesque neque, sed sodales diam diam a elit. 
    </pre>
    </body>
    </html>

注意 似乎没有维护代码部分中的换行符。因此,如果您复制/粘贴此代码,则需要添加换行符才能正确显示。如果您想要预览它应该是什么样子,我还将该文件复制到服务器:http://www.lakecountyfl.gov/test.htm

2 个答案:

答案 0 :(得分:0)

我不明白这一点。使用&lt; pre&gt;的重点是什么?你有浏览器的标签,无论如何都要做文字换行吗?

答案 1 :(得分:0)

除非你真的希望打印输出跳过恰好在比纸上物理线宽的逻辑行上的所有文本,否则最好使用除<pre>以外的其他内容:

从文本框中取出字符串,将其段落包装到<p>...</p>中,然后将其发送到包含在<div>..</div>中的浏览器。

或者,甚至更简单:发送<p>...</p> ...,其中<br />是您的主要内容,其中换行符分别由<br>(或{{1}}替换)。