スポンサード リンク
page-break-insideプロパティ
ページを印刷するときの改ページの位置が指定できます使い方(書式)
セレクタ { 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>
実際の表示
2ページ目。印刷するときブロック要素の途中で改行します
印刷テスト
1行目
2行目
3行目
4行目
5行目
6行目
7行目
8行目
9行目
10行目
11行目
12行目
13行目
14行目
15行目
16行目
17行目
18行目
19行目
20行目
21行目
22行目
23行目
24行目
25行目