Question

我正在处理一个可打印的事件列表，打印机打印一页很好，但是切掉底部的一些文本，然后打印第二个空白页

我已经尝试了所有我知道的但是我不知所措。

Answer 1

在print.css中，在overflow: visible上设置overflow: auto而不是div#content。至少在Firefox中为我修复了它。溢出自动的定义是：“如果溢出被剪切，则应添加滚动条以查看其余内容” - 但打印页面上不存在滚动条。

我猜测因为内容div应该跨越多个页面，浏览器会认为“你正在流出容器之外，必须用滚动条剪切”。在这种情况下，容器是内容div出现的第一页。

Answer 2

我发现在容器div上设置display: inline也有帮助。这些伟大的答案中的一些在某些情况下对我有用，而在其他情况下没有。

<div class="container">
    <div class="content-cutting-off-here">
        Some long text that gets cut off at the end of the page...
    </div>
</div>

大多数人将容器设置为显示block或inline-block。对我来说，这是切断文本，并将其设置为inline规避了。这也使width和height与违规容器div无关;我发现在印刷时会产生麻烦。

@media print {
    .container {
        display: inline;
    }
}

Here is a great article that helped me with this solution.

Answer 3

我知道这是一个古老的问题，但这是另一种更新的方式。

检查您是否在剪切元素上使用display: flex;。这是我的问题，将其设置为block修复它。

Answer 4

如果您尝试打印的任何容器都浮起，它们就会像您看到的那样被截断。

在print.css中，请确保在不破坏布局的情况下关闭所有浮动内容。这很痛苦，但浏览器对打印的支持最多也很薄弱。

Answer 5

您是否已使用样式表的print属性的media值，例如

<link rel="stylesheet" href="print.css" media="print" />

您可能还希望将page-break-before属性用于您不想破坏的元素。

Answer 6

我刚刚在ie7中解决了这个问题。这是在一个Sharepoint项目中，它有各种表格单元格和/或div设置为高度：100％。打印时，它会打印长格式，第一页或2将照常打印，然后是空白页而不是其余页。

在我的打印样式表中，我设置了这些表和＆amp; divs到height：auto，现在打印得很好。

我现在在IE8中遇到了不同的问题。 UGH！

Answer 7

如果overflow:visible;不起作用，请尝试overflow-y:visible;

（我有body{overflow-y:scroll;}，而print.css中的body{overflow:visible;}没有重写它......）

Answer 8

我通过添加overflow:visible;修复了问题并将其padding-right: 30px;替换为滚动条宽度。

Answer 9

我刚遇到这个问题，并一直在寻找符合我特定需求的解决方案。在我的情况下，我有大约7个表嵌套在一个更大的表中。我能够正确打印并在打印预览中显示整个网页的唯一方法是使用分页符。分页符是CSS属性，允许您通过将属性附加到块元素来指定和/或强制分页符。

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before

Answer 10

只需设置显示：内联即可解决我同样的问题。

我得到的参考链接，https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm

Answer 11

我将打印纸设置为仅打印模式内容。我的解决方法是制作模式position: absolute;。我的情态最初是position: fixed;。

Answer 12

对我来说，问题是这个元标记：

<meta name="viewport" content="width=device-width, initial-scale=1"/>

将初始比例的值设为1以外的值即可解决我的问题：

<meta name="viewport" content="width=device-width, initial-scale=0.8"/>

Answer 13

对我来说，为 overflow:visible; 设置 body 解决了这个问题。

body {
        overflow: visible;
}

打印样式表，一页打印并切断剩余文本

13 个答案: