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

Question

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

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

Answer 1

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

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

Answer 2

我知道这是一个古老的问题,但这是另一个更新的方式.

检查您是否在display: flex;剪切元素上使用.对我来说这是问题所在,将其设置为block修复它.

Answer 3

我发现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>

大多数人设置容器来显示block或inline-block.对我来说,这是切断文本,并设置它来inline规避.这也width与height违规容器div无关; 我发现打印时会有麻烦.

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

这是一篇很棒的文章,帮助我解决了这个问题.

Answer 4

如果你试图打印的任何容器都浮起来,它们会像你看到的那样被截断.

在print.css中,请确保在不破坏布局的情况下关闭所有浮动内容.这是一个痛苦,但浏览器对打印的支持充其量是微弱的.