【CSS】ページ印刷時に要素内の改ページを禁止する

【CSS】ページ印刷時に要素内の改ページを禁止する

Webページを印刷する際に、ページが中途半端なところで改ページされてしまうということがあります。

印刷をした際にも見づらいため、改行を禁止したい場合も多いかと思います。

そんな時、セレクタで指定した要素内での改行を禁止する方法があるようなのでメモです。

「page-break-inside」というプロパティで「avoid」を指定するようです。

https://developer.mozilla.org/ja/docs/Web/CSS/page-break-inside

<style>
/* 要素内での改ページを禁止する */
.noBreak {
  page-break-inside: avoid;
}
</style>

こうすることにより、「noBreak」クラスを指定した要素の中では改ページが禁止されます。

とっても便利ですね。

ちなみに、デフォルトの値は「auto」になっており、自動的な改ページが行われます。