我的页面中有一个 pre 标记，其中包含相当多的文本。当我在浏览器中预览此页面时，它看起来不错。但是当我打印它时，pre 标签中的所有内容都打印在新页面上。就像 pre 标记导致分页一样。
我正在使用 css 对 pre 标签的文本进行自动换行。
下面是一个示例。如果您在浏览器中预览它看起来不错，但如果您进行打印预览，您可以看到 pre 标签中的所有内容如何显示在新页面中。 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
最佳答案
除非您真的希望打印输出跳过恰好位于比纸上物理行宽的逻辑行上的所有文本，否则您最好使用 <pre> 以外的其他内容:
从文本框中取出字符串，将其段落换成<p>...</p>然后将其包装到 <div>..</div> 中发送到浏览器.
或者，更简单:发送 <p>...</p>其中 ...你的换行符刚刚被 <br /> 取代了吗？ (或分别为 <br>)。
关于html - pre 标记中的大量文本导致分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1560516/