page-break-insideプロパティ

TOPページに戻る > CSS

page-break-insideプロパティ

ページを印刷するときの改ページの位置が指定できます
指定したブロック要素の途中で改行することができます
値がalways、auto以外の値は対応しているブラウザが少ないです
初期値はautoでブラウザが自動で改ページを決めます

使い方（書式）

セレクタ { page-break-inside: 値; }                                    

page-break-insideプロパティ

対応ブラウザ
適用できる要素	ブロック要素
子要素へのスタイルの継承	しない

プロパティの値	説明
auto	ブラウザが自動で判断。初期値
always	指定したブロック要素の途中で改行する
avoid	要素の途中で改行されなくなる
left	コンテンツが左ページにくるようにする。対応ブラウザがOperaのみ
right	コンテンツが右ページにくるようにする。対応ブラウザがOperaのみ

実際の指定方法

.hoge { page-break-inside: auto; }    /* ブラウザが自動で判断 */

.hoge2 { page-break-inside: always; } /* ブロック要素の途中で改行 */

.hoge3 { page-break-inside: avoid; }  /* ブロック要素の途中で改行されなくなる */

.hoge4 { page-break-inside: left; }   /* コンテンツが左ページにくるようにする */

.hoge5 { page-break-inside: right; }  /* コンテンツが右ページにくるようにする */

html部分

<div class="hoge2">
<p>2ページ目。印刷するときブロック要素の途中で改行します
<br>印刷テスト
<br>1行目
<br>2行目
<br>3行目
<br>4行目
<br>5行目
<br>6行目
<br>7行目
<br>8行目
<br>9行目
<br>10行目
<br>11行目
<br>12行目
<br>13行目
<br>14行目
<br>15行目
<br>16行目
<br>17行目
<br>18行目
<br>19行目
<br>20行目
<br>21行目
<br>22行目
<br>23行目
<br>24行目
<br>25行目
</p>
</div>