117

印刷スタイルシートを作成する場合、画像が複数のページにまたがるのではなく、常に1つのページにのみ表示されるようにする方法はありますか。画像はページよりもはるかに小さいですが、ドキュメントフローに基づいて、最終的にページの下部に表示され、分割されます。私が見ている動作の例を以下に示します。

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に変換するために作成している1回限りのドキュメントであることが多いため、必ずしもすべてのブラウザで機能することを心配しているわけではありません。

4

1 に答える 1

74

私が考えることができる唯一の手段は、次の css ルールの 1 つ (または場合によっては複数) を使用することです。

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 にあるかどうかに関係なく） 、リストなど...)。

ここでの有益な議論: 「特定の、クロスブラウザー互換の最も有用な CSS プロパティはmedia="print"何ですか? 」

参考文献:

于 2010-04-15T22:56:05.897 に答える