[解決済み] Google Chrome 印刷のページブレーク
2022-05-18 07:06:02
質問
google chromeに改ページをさせようとしています。
いろいろなサイトを通して
page-break-after: always;
がクロームで有効であることを多くのウェブサイトで教えてもらいましたが、非常に簡単な例でもうまくいかないようです。クロームで印刷するときに強制的に改ページさせる方法はありますか?
どのように解決するのですか?
私は以下の方法で、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 はさらに多くの要素を含んでいます。
関連
-
[css3]Apple携帯電話のロック解除のためのCSS3サンプルフォントシャインエフェクト
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[CSSチュートリアル]ドラッグ&ドロップ効果を実現するピュアCSSコード
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] Chromeの同一生成元ポリシーを無効にする
-
[解決済み] ウェブサイト制作のためのChromeキャッシュの無効化
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み] chromedriverでSeleniumを使用していることをWebサイトで検出することは可能ですか?
-
[解決済み】自己署名付きlocalhost証明書をChromeが受け入れるようにする方法
-
[解決済み】Chrome DevTools Devicesに接続してもデバイスが検出されない。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[css3]css3におけるtransformプロパティの4つの機能
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[CSSチュートリアル】CSSのfloatとunfloatについて
-
[CSSチュートリアル】CSSのシングルDivの描画スキル
-
[CSSチュートリアル】ピュアCSSで実装した通知バーの3種類のスクロール効果
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[CSSチュートリアル]CSS動的高さ遷移のアニメーション効果の実装の
-
[CSSチュートリアル】よく使われるnth-childセレクタをまとめる
-
[解決済み] HTMLに改ページを挿入し、wkhtmltopdfがそれを解析するにはどうすればよいですか?