Google Chromeで改ページを実行しようとしています。
Chromeでpage-break-after: always;有効な多数のWebサイトから通知を受けましたが、非常に単純な例でも機能しないようです。クロムで印刷するときに改ページを強制する方法はありますか？
回答:
私は、Chromeを含むすべての主要なブラウザで次のアプローチをうまく使用しています。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is Page 3</h1>
</div>
</body>
</html>これは簡単な例です。実際のコードでは、各ページのdivにはさらに多くの要素が含まれています。
position: relative。
break-afterとbreak-beforeのみに適用されますblock-level elements, table row groups, table rows (but see prose)：drafts.csswg.org/css-break-3/#break-between -それは何の山車や任意の空想の位置決めトリックを意味しません。
実際、（Phil Rossから）承認されたものとして選択された回答には、1つの詳細がありません。
それはDOES Chromeで仕事をし、解決策は本当に愚かな！
親と改ページを制御する要素の両方を次のように宣言する必要があります。
position: relativeこのフィドルをチェックしてください：http : //jsfiddle.net/petersphilo/QCvA5/5/show/
これは次の場合に当てはまります。
page-break-before
page-break-after
page-break-insideただし、Safariで改ページの制御が機能しません（少なくとも5.1.7では）。
これが役に立てば幸いです!!!
PS：以下の質問は、Chromeの最近のバージョンでは、次の位置であってもこれを尊重しないという事実を明らかにしました。騙す。しかし、彼らは尊敬しているようです：
-webkit-region-break-inside: avoid;このフィドルを参照してください：http : //jsfiddle.net/petersphilo/QCvA5/23/show
だから今すぐ追加する必要があると思う...
お役に立てれば！
<h7 class="page-breaker" style="display: block;position: relative;page-break-before:always">Grade <?php echo $grade;?></h7>
ここで、Chromeはフローティングされたdivの改ページ* css設定も無視することに注意したいと思います。
私はCSS仕様のどこかにこれについて正当な根拠があると思うが、いつか誰かを助けるかもしれないと気づいた;-)
もう1つの注意：IE7は、前のブロック要素の明示的な高さがなければ、改ページ設定を確認できません。
私はこの問題を抱えています-私のページ区切りはChromeを除くすべてのブラウザーで機能します-そして、それを表のセルの中にあるpage-break-after要素に分離することができました。（CMSの古い、継承されたテンプレート。）
どうやらChromeはテーブルセル内のpage-break-beforeまたはpage-break-afterプロパティを尊重しないので、Philの例のこの変更されたバージョンは2番目と3番目の見出しを同じページに配置します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Paginated HTML</title>
<style type="text/css" media="print">
div.page
{
page-break-after: always;
page-break-inside: avoid;
}
</style>
</head>
<body>
<div class="page">
<h1>This is Page 1</h1>
</div>
<table>
<tr>
<td>
<div class="page">
<h1>This is Page 2</h1>
</div>
<div class="page">
<h1>This is, sadly, still Page 2</h1>
</div>
</td>
</tr>
</table>
</body>
</html>CSS仕様を前提として、Chromeの実装は（間違いなく）許可されています。詳しくは、http：//www.google.com/support/forum/p/Chrome/thread？ tid = 32f9d9629d6f6789＆hl = jaをご覧ください。
CSSに注意：display:inline-block印刷するとき。
テーブルがスタイルのdiv内にある場合、ChromeとFirefoxでは次のページに移動するCCSプロパティが機能しません display:inline-block
たとえば、次は機能しません。
<div style='display:inline-block'>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>しかし、次の作業：
<div>
<table style='page-break-before:always'>
...
</table>
<table style='page-break-before:always'>
...
</table>
</div>display: flex
私が知る限り、Google Chromeでテーブルの正しい改ページを取得する唯一の方法は、要素<tr>にプロパティdisplay：inline-table（またはdisplay：inline-block を与えることですが、テーブルではない他の場合により適しています）。プロパティ「page-break-after：always; page-break-inside：prevent;」も使用する必要があります。@Phil Rossによって書かれた
<table>
<tr style="display:inline-table;page-break-after: always; page-break-inside: avoid;">
<td></td>
<td></td>
...
</tr>
</table>