CSS 打印样式表，一页打印并切断剩余的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1312320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
print stylesheet, one page prints and cuts off remaining text
提问by mjr
I'm working on a printable list of events, the printer prints one page fine, but cuts off some of the text on the bottom, then it print a second blank page
我正在处理可打印的事件列表，打印机可以很好地打印一页，但会切断底部的一些文本，然后打印第二个空白页
I've tried everything I know but am at a loss.
我已经尝试了我所知道的一切，但不知所措。
回答by CalebD
In print.css, set overflow: visibleinstead of overflow: autoon div#content. That fixed it for me in Firefox at least. The definition of overflow auto is: "If overflow is clipped, a scroll-bar should be added to see the rest of the content" -- but scroll bars don't exist on printed pages.
在 print.css 中，设置overflow: visible而不是overflow: autoon div#content。至少在 Firefox 中为我修复了它。自动溢出的定义是：“如果溢出被剪裁，则应添加滚动条以查看其余内容”-但打印页面上不存在滚动条。
I'm guessing that since the content div should span across multiple pages, the browser thinks "you're flowing outside your container and must be clipped with a scroll bar". The container in that case is the first page the content div appears on.
我猜因为内容 div 应该跨越多个页面，浏览器认为“你在你的容器之外流动，必须用滚动条剪裁”。在这种情况下，容器是内容 div 出现的第一页。
回答by red-X
I know this is an old question but here's another, newer way this can happen.
我知道这是一个老问题，但这是另一种可能发生的更新方式。
Check if you're using display: flex;on the clipped element. It was the problem for me, setting it to blockfixed it.
检查您是否在display: flex;剪辑元素上使用。这对我来说是个问题，设置它来block修复它。
回答by Yes Barry
I found that setting display: inlineon container divs also helped. Some of these great answers here have worked for me in certain situations while in others no.
我发现display: inline容器 div上的设置也有帮助。这里的一些很好的答案在某些情况下对我有用，而在其他情况下则不然。
<div class="container">
<div class="content-cutting-off-here">
Some long text that gets cut off at the end of the page...
</div>
</div>
Most people set containers to display blockor inline-block. For me it was cutting off text, and setting it to inlinecircumvented that. This also makes widthand heightirrelevant for the offending container div; which I have found to be a nuisance when printing.
大多数人将容器设置为显示block或inline-block。对我来说，它正在切断文本，并设置它来inline规避它。这也width与height违规容器 div 无关；我发现打印时很麻烦。
@media print {
.container {
display: inline;
}
}
回答by Pat
If any of the containers you're trying to print are floated, they'll get cut-off like you're seeing.
如果您尝试打印的任何容器是浮动的，它们就会像您看到的那样被切断。
In your print.css, make sure you turn off all the floating that you can without destroying your layout. It's a pain, but browser support for printing is weak at best.
在你的 print.css 中，确保你关闭了所有你能做到的浮动而不破坏你的布局。这很痛苦，但浏览器对打印的支持充其量是微弱的。
回答by Randell
Are you already using the printvalue for the mediaattribute for your stylesheet like
您是否已经使用样式表print的media属性值，例如
<link rel="stylesheet" href="print.css" media="print" />
You might also want to use page-break-beforeattributes for elements that you don't want to break.
您可能还想为page-break-before不想破坏的元素使用属性。
回答by betsy
I just resolved this problem in ie7. This was in a Sharepoint project, which had various table cells and/or divs set to height:100%. When printed, it would print long forms, the first page or 2 would print as usual, then blank pages instead of the rest.
我刚刚在ie7中解决了这个问题。这是在 Sharepoint 项目中，该项目将各种表格单元格和/或 div 设置为高度：100%。打印时，它会打印长表格，第一页或第二页会像往常一样打印，然后是空白页而不是其余页。
In my print stylesheet, I set those tables & divs to height: auto, and now it prints fine.
在我的打印样式表中，我将这些表格和 div 设置为高度：自动，现在它可以正常打印。
I'm having a different problem in IE8 now. UGH!
我现在在 IE8 中遇到了不同的问题。啊！
回答by buTs
if overflow:visible;not works, try overflow-y:visible;
如果overflow:visible;不起作用，请尝试overflow-y:visible;
(i had body{overflow-y:scroll;}, and body{overflow:visible;}in print.css not rewrited it...)
（我有body{overflow-y:scroll;}，并且body{overflow:visible;}在 print.css 中没有重写它......）
回答by Hassan
I fixed the problem by adding overflow:visible;and give it padding-right: 30px;to substitute for the scroll bars width.
我通过添加overflow:visible;并用它padding-right: 30px;代替滚动条宽度来解决这个问题。
回答by Zach Johnson
I just ran into this issue and have been scouring the internet for a solution that fit my specific needs. In my case I had about 7 tables nested in a larger table. The only way I was able to get the entire web page to print and display in print preview correctly was to use page breaks. Page breaks are CSS properties that allow you to specify and/or force page breaks by attaching the property to block elements.
我刚刚遇到了这个问题，并一直在互联网上寻找适合我特定需求的解决方案。就我而言，我有大约 7 个表嵌套在一个更大的表中。我能够正确打印整个网页并在打印预览中显示的唯一方法是使用分页符。分页符是 CSS 属性，允许您通过将属性附加到块元素来指定和/或强制分页符。
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before
回答by Pavan Joshi
just setting display: inlinesolved my same problem.
只是设置display: inline解决了我同样的问题。
Reference link I got, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm
我得到的参考链接，https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm
