打印样式:如何确保图像不会跨越分页符 [英] 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 complained 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、跨度、列表等中...).

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...).

这里有一些有用的讨论:什么media="print" 特定的、跨浏览器兼容的 CSS 属性是最有用的吗?"

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.

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