CSS

The page-break-inside property is a CSS property used to control page breaks within elements during printing or pagination.

page-break-inside

　page-break-insideプロパティは、印刷やページ分割の際に要素の内部で改ページを制御するためのプロパティです。

　このプロパティは、次のような使い方をします。

CSS

.page {
	page-break-inside: value;
}

　valueには以下の値が指定できます。

auto（デフォルト）: 要素が改ページの候補になりますが、必要に応じて内部で改ページされます。
avoid: 要素が改ページの候補にならず、必要に応じて改ページを回避します。
always: 要素は常に改ページの候補になり、必要に応じて改ページされます。

　以下は具体的なサンプルコードです。

HTML

<!DOCTYPE html>
<html>
<head>
	<style>
		.page {
			page-break-inside: avoid;
			border: 1px solid black;
			padding: 10px;
			margin-bottom: 20px;
		}
	</style>
</head>
<body>
	<div class="page">
		<h2>ページ1</h2>
		<p>ここにページ1のコンテンツがあります。</p>
	</div>
	<div class="page">
		<h2>ページ2</h2>
		<p>ここにページ2のコンテンツがあります。</p>
	</div>
	<div class="page">
		<h2>ページ3</h2>
		<p>ここにページ3のコンテンツがあります。</p>
	</div>
</body>
</html>

　このサンプルでは、.pageクラスの要素に page-break-inside: avoid; が設定されています。これにより、各要素は改ページの候補にならず、必要に応じて改ページが回避されます。各.page要素は境界線で区切られ、コンテンツがページ間で分割されることはありません。