打印样式：如何确保图像不跨越分页符 [英] Print styles: How to ensure image doesn't span a page break

问题描述

在编写打印样式表时，是否有一种方法可以确保图片始终只在一个页面上，而不是跨多个页面。比页面小得多的图片，但是基于文档流，他们最终在页面的底部并得到拆分。我看到的行为的一个例子如下：

When writing a print stylesheet, is there a way to ensure that an image is always only on a single page, instead of spanning multiple pages. The images much smaller than the page, but based on the document flow, they end up at the bottom of the page and get split. An example of the behavior I'm seeing is below:

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

我想要的

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | |                | |
       | |________________| |
       |         …          |

所有这些时候，我在LaTeX中讨论浮动，在这里我要求相同的功能。这可以做吗？我不一定关心它在所有浏览器中工作，因为这通常只是一个一次性的文档，我写成要转换为PDF。

All those times I bitching about floats in LaTeX, and here I am asking for the same functionality... Can this be done? I'm not necessarily concerned about it working in all browsers, since this is often just a one-off document I'm writing to be turned into a PDF.

推荐答案

我可以想到的唯一方法是使用一个（或更多）以下css规则：

The only means I can think of is to use one (or potentially more) of the following css rules:

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

我不记得这些声明应用于块级元素（因此您还必须在图片上定义 display：block; ，或者使用某种包装容器并应用规则是否在段落，div，span，list等等）。

I half-recall that these declarations only apply to block-level elements (so you'd also have to define display: block; on your image, or use some kind of wrapping container and apply the rules to that (whether it's in a paragraph, div, span, list, etc...).

这里有一些有用的讨论：什么是usefule media =print

Some useful discussion here: "What are most usefule media="print" specific, cross-browser compatible CSS properties?"

参考资料：

• page- break-after 。


• page-break-before 。


• page-break-inside 。

• page-break-after.
• page-break-before.
• page-break-inside.

这篇关于打印样式：如何确保图像不跨越分页符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！