打印样式表，一页打印并截断剩余文本答案

【问题标题】：print stylesheet, one page prints and cuts off remaining text打印样式表，一页打印并截断剩余文本
【发布时间】：2010-11-21 16:34:00
【问题描述】：

我正在处理一个可打印的事件列表，打印机可以正常打印一页，但会切断底部的一些文本，然后打印第二个空白页

我已经尝试了我所知道的一切，但不知所措。

【问题讨论】：

标签： css printing

【解决方案1】：

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

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

【讨论】：

它似乎在 Chrome 中不起作用，但在 IE 中对我来说很好。
杰克雷神也一样。你找到解决办法了吗？
在 chrome 中为我工作。懒得加了* { overflow: auto !important; }
我将此解决方案应用于我们遇到的一个问题，我会说在 Chrome 中我看到到处都是小滚动条。因此，滚动条实际上确实存在于打印页面上，显然 - 这是没有意义的。
这在添加 !important 时有效。所以懒惰的解决方案是* { overflow: visible !important; }

【解决方案2】：

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

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

【讨论】：

如果我真的想要它是 flex 怎么办？
{time pass} 我有一个显然需要灵活处理才能将所有项目放在一条线上。我也希望它能够正确打印。

【解决方案3】：

我发现在容器 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.

【讨论】：

内嵌显示就像一个魅力！

【解决方案4】：

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

在您的 print.css 中，确保在不破坏布局的情况下尽可能关闭所有浮动。这很痛苦，但浏览器对打印的支持充其量也很弱。

【讨论】：

绝对解决了我的问题。我放了一个 clear: both; 的类，它只能在 print.css 中找到

【解决方案5】：

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

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

您可能还想对不想破坏的元素使用page-break-before 属性。

【讨论】：

是的，打印样式表肯定在使用该页面实际上只是一长串表格，我真的不想在每个表格之前分页

【解决方案6】：

我刚刚在ie7中解决了这个问题。这是在一个 Sharepoint 项目中，该项目将各种表格单元格和/或 div 设置为 height:100%。打印时，它将打印长表格，第一页或第二页将照常打印，然后是空白页而不是其余页。

在我的打印样式表中，我将这些表格和 div 设置为 height: auto，现在它可以正常打印了。

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

【讨论】：

【解决方案7】：

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

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

【讨论】：

我使用@print {}，body{overflow:visible;} 为我做了。

【解决方案8】：

我通过添加overflow:visible; 并用padding-right: 30px; 替换滚动条宽度来解决问题。

【讨论】：

这不是很有帮助。不清楚你添加了这些样式是什么元素。

【解决方案9】：

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

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

【讨论】：

【解决方案10】：

只是设置 display: inline 解决了我同样的问题。

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

【讨论】：

【解决方案11】：

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

【讨论】：

【解决方案12】：

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

body {
        overflow: visible;
}

【讨论】：

【解决方案13】：

我有这个问题。就我而言，这是由于

position: fixed;

元素。我把它改成了

@media print{
   position: relative;
}

现在我什至看到了固定元素后面的新元素，并且不再在底部切断。

【讨论】：

【解决方案14】：

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

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

为初始比例设置除 1 以外的任何值都可以解决我的问题：

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

【讨论】：