【CSS】印刷対応。改ページが効かなかった原因

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で調整する必要があります。