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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
|
---
title: page-break-inside
slug: Web/CSS/page-break-inside
tags:
- CSS
- CSS プロパティ
- CSS ページ付きメディア
- Reference
- 改ページ
translation_of: Web/CSS/page-break-inside
---
<div>{{CSSRef}}</div>
<div class="blockIndicator warning">このプロパティは {{cssxref("break-inside")}} プロパティによって置き換えられました。</div>
<p>CSS の <strong><code>page-break-inside</code></strong> プロパティは、現在の要素の<em>内側の</em> 改ページを調整します。</p>
<pre class="brush:css no-line-numbers">/* キーワード値 */
page-break-inside: auto;
page-break-inside: avoid;
/* グローバル値 */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: unset;
</pre>
<p>{{cssinfo}}</p>
<h2 id="Page_break_aliases" name="Page_break_aliases">改ページの別名</h2>
<p><code>page-break-inside</code> プロパティは古いプロパティとなり、 {{cssxref("break-inside")}} によって置き換えられました。</p>
<p>互換性のため、 <code>page-break-inside</code> はブラウザーから <code>break-inside</code> の別名として扱われます。これにより、 <code>page-break-inside</code> を使用しているサイトが引き続き設計通りに動作することを保証します。値のサブセットは次のような別名になります。</p>
<table>
<thead>
<tr>
<th scope="col">page-break-inside</th>
<th scope="col">break-inside</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td><code>avoid</code></td>
<td><code>avoid</code></td>
</tr>
</tbody>
</table>
<h2 id="Syntax" name="Syntax">構文</h2>
<h3 id="Values" name="Values">値</h3>
<dl>
<dt><code>auto</code></dt>
<dd>初期値です。自動的な改ページが行われます (強制や禁止の機能は持ちません)。</dd>
<dt><code>avoid</code></dt>
<dd>要素の内側で改ページされないようにします。</dd>
</dl>
<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
{{csssyntax}}
<h2 id="Example" name="Example">例</h2>
<h3 id="HTML" name="HTML">HTML</h3>
<pre class="brush: html"><div class="page">
<p>これは最初の段落です。</p>
<section class="list">
<span>リスト</span>
<ol>
<li>順序付き項目1</li>
<!-- <li>順序付き項目2</li> -->
</ol>
</section>
<ul>
<li>順序なし項目1</li>
<!-- <li>順序なし項目2</li> -->
</ul>
<p>これは第二段落です。</p>
<p>これは第三段落です。文章の量が多くなっています。</p>
<p>これは第四段落です。第三段落よりも、さらにもう少しだけ、文章の量が多くなっています。</p>
</div></pre>
<h3 id="CSS" name="CSS">CSS</h3>
<pre class="brush: css">.page {
background-color: #8cffa0;
height: 90px;
width: 200px;
columns: 1;
column-width: 100px;
}
.list, ol, ul, p {
break-inside: avoid;
}
p {
background-color: #8ca0ff;
}
ol, ul, .list {
margin: 0.5em 0;
display: block;
background-color: orange;
}
p:first-child {
margin-top: 0;
}</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample("Example", 400, 160)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}</td>
<td>{{Spec2('CSS3 Paged Media')}}</td>
<td>より多くの要素に適用できるように拡張</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.properties.page-break-inside")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{cssxref("break-before")}}, {{cssxref("break-after")}}, {{cssxref("break-inside")}}</li>
<li>{{cssxref("page-break-after")}}, {{cssxref("page-break-before")}}</li>
<li>{{cssxref("orphans")}}, {{cssxref("widows")}}</li>
</ul>
|
