files/zh-cn/web/css/page-break-inside/index.html


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

---
title: page-break-inside
slug: Web/CSS/page-break-inside
tags:
  - page-break-inside
translation_of: Web/CSS/page-break-inside
---
<div>{{CSSRef}}</div>

<p><strong><code>page-break-inside</code></strong> CSS 属性调整当前元素内的分页符。</p>

<pre class="brush:css no-line-numbers">/* Keyword values */
page-break-inside: auto;
page-break-inside: avoid;

/* Global values */
page-break-inside: inherit;
page-break-inside: initial;
page-break-inside: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>Initial value. Automatic page breaks (neither forced nor forbidden).</dd>
 <dt><code>avoid</code></dt>
 <dd>Avoid page breaks inside the element.</dd>
</dl>

<h3 id="Formal_syntax">Formal syntax</h3>

{{csssyntax}}

<h2 id="Example">Example</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div class="page"&gt;
  &lt;p&gt;This is the first paragraph.&lt;/p&gt;
  &lt;section class="list"&gt;
    &lt;span&gt;A list&lt;/span&gt;
    &lt;ol&gt;
      &lt;li&gt;one&lt;/li&gt;
&lt;!--       &lt;li&gt;two&lt;/li&gt; --&gt;
    &lt;/ol&gt;
  &lt;/section&gt;
  &lt;ul&gt;
    &lt;li&gt;one&lt;/li&gt;
&lt;!--     &lt;li&gt;two&lt;/li&gt; --&gt;
  &lt;/ul&gt;
  &lt;p&gt;This is the second paragraph.&lt;/p&gt;
  &lt;p&gt;This is the third paragraph, it contains more text.&lt;/p&gt;
  &lt;p&gt;This is the fourth paragraph. It has a little bit more text than the third one.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="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">Result</h3>

<p>{{EmbedLiveSample("Example", 400, 160)}}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Paged Media', '#page-break-inside', 'page-break-inside')}}</td>
   <td>{{Spec2('CSS3 Paged Media')}}</td>
   <td>Allows this property on more elements.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-inside', 'page-break-inside')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>

<p> </p>


<p>{{Compat("css.properties.page-break-inside")}}</p>

<p> </p>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/CSS/page-break-after" title="CSS/page-break-after"><code>page-break-after</code></a>, <a href="/en-US/docs/CSS/page-break-before" title="CSS/page-break-before"><code>page-break-before</code></a></li>
 <li><a href="/en-US/docs/CSS/orphans" title="CSS/orphans"><code>orphans</code></a>, <a href="/en-US/docs/CSS/widows" title="CSS/widows"><code>widows</code></a></li>
</ul>