dCSSを使って改ページの設定をしたのですが、うまくいかないパターンがありました。違いは「display」が「inline」か「block」かの違いだけでした。
スポンサーリンク改ページが効かなかった原因
改ページしたい場所のタグに「page-break-before」というクラスを設定し、cssで「page-break-before: always;」を設定しました。
.page-break-before {
page-break-before: always;
}
「page-break-before: always;」は指定した位置で強制的に改ページさせるものです。強制的に改ページさせるはずなのに、うまくいきません。
色々調べた結果、指定したタグがインライン要素だったことが原因だと分かりました。
対応方法
対応方法は２つあります。お好きな方で対応してみてください。
(1) display: block; も設定する
「page-break-before: always;」と合わせて、「display: block;」も設定すれば、インライン要素でもブロック要素として扱ってくれるので解決できます。
.page-break-before {
display: block;
page-break-before: always;
}
注意点
inline要素 に「display: block;」を指定するとレイアウトが崩れる可能性がありますので、ご注意ください。もし、崩れてしまった場合は、cssで調整してみてください。
もしくは、下記 (2) で対応すると上手くいく場合もありますので、試してみてくださいね。
(2) ブロック要素（divタグなど）で囲う
spanタグはインライン要素なので、それ自体をdivタグなどのブロック要素で囲ってしまいます。後は、そのブロック要素に「page-break-before: always;」を設定すればOKです。
<div class="page-break-before"><span>この直前で改ページしたい</span></div>
まとめ
いろいろと試した結果、「display: block;」を指定して、ブロック要素として扱うと、改ページさせることができました。
上手くいかない原因がインライン要素だとはなかなか気づきませんでした。これからはハマらないようにしたいところです。
あと、なんとなく僕のイメージですけど、改ページといえば、普通ブロック単位ですよね。inline要素だと上手くいかないのは当然なのかもしれないです…。
以上、誰かのお役に立てれば幸いです。
それでは、最後までお読みいただきありがとうございました！
スポンサーリンク
