
CSSを使って改ページの設定をしたのですが、うまくいかないパターンがありました。
うまくいく場合といかない場合の違いは display の値でした。
改ページが効かなかった原因
改ページしたい箇所にあるタグに下記のようなスタイルを指定しました。
.page-break-before { page-break-before: always; }
※page-break-before はタグに指定した class 名(任意)です
この指定自体には問題はありませんが、今回指定したタグがが span ということが原因でした。
span は、inline要素ですので、displayの初期値は inline となります。それが原因で改ページされていないようです。
改ページはブロック単位で行われるイメージなので、inline だとうまく指定できないのかなと思います。
※個人的な推測です
対応
(1) display: block; も設定することで解決できます。
.page-break-before { display: block; page-break-before: always; }
(2) span要素をブロックタグ(div等)で囲って、そちらに改ページのスタイルを設定しても解決できます。
<div class="page-break-before"><span>この直前で改ページしたい</span></div>
注意点
inline要素 を block に変更するためレイアウトが崩れる可能性がありますので、ご注意ください。
その場合は、対応 (2) で対応する、もしくは崩れた部分をcssで調整する必要があります。