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
|
---
title: break-before
slug: Web/CSS/break-before
tags:
- break-before
translation_of: Web/CSS/break-before
---
<div>{{CSSRef}}</div>
<p>The<strong> <code>break-before</code></strong> <a href="/en-US/docs/CSS">CSS</a> 属性定义页面，列或区域在生成的盒子之前应如何处理中断。 如果没有生成的盒子，则忽略该属性。</p>
<pre class="brush:css no-line-numbers">/* Generic break values */
break-before: auto;
break-before: avoid;
/* Page break values */
break-before: avoid-page;
break-before: page;
break-before: always;
break-before: left;
break-before: right;
break-before: recto;
break-before: verso;
/* Column break values */
break-before: avoid-column;
break-before: column;
/* Region break values */
break-before: avoid-region;
break-before: region;
/* Global values */
break-before: inherit;
break-before: initial;
break-before: unset;
</pre>
<p>Each possible break point (in other words, each element boundary) is affected by three properties: the {{cssxref("break-after")}} value of the previous element, the <code>break-before</code> value of the next element, and the {{cssxref("break-inside")}} value of the containing element.</p>
<p>To determine if a break must be done, the following rules are applied:</p>
<ol>
<li>If any of the three concerned values is a <em>forced break value</em> (<code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, or <code>region</code>), it has precedence. If more than one of them are such a break, the one of the element that appears the latest in the flow is taken (i.e., the <code>break-before</code> value has precedence over the <code>break-after</code> value, which itself has precedence over the <code>break-inside</code> value).</li>
<li>If any of the three concerned values is an <em>avoid break value</em> (<code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, or <code>avoid-column</code>), no such break will be applied at that point.</li>
</ol>
<p>Once forced breaks have been applied, soft breaks may be added if needed, but not on element boundaries that resolve in a corresponding avoid value.</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<p>The <code>break-before</code> property is specified as one of the keyword values from the list below.</p>
<h3 id="Values">Values</h3>
<h4 id="General_break_values">General break values</h4>
<dl>
<dt><code>auto</code></dt>
<dd>Allows, but does not force, any break (page, column, or region) to be inserted right before the principal box.</dd>
<dt><code>avoid</code></dt>
<dd>Avoids any break (page, column, or region) from being inserted right before the principal box.</dd>
</dl>
<h4 id="Page_break_values">Page break values</h4>
<dl>
<dt><code>avoid-page</code></dt>
<dd>Avoids any page break right before the principal box.</dd>
<dt><code>page</code></dt>
<dd>Forces a page break right before the principal box.</dd>
<dt><code>always</code></dt>
<dd>Forces a page break right before the principal box. (This is an alias of <code>page</code>, and has been kept to facilitate the transition from {{cssxref("page-break-after")}}, which is a subset of this property.)</dd>
<dt><code>left</code></dt>
<dd>Forces one or two page breaks right before the principal box, whichever will make the next page into a left page.</dd>
<dt><code>right</code></dt>
<dd>Forces one or two page breaks right before the principal box, whichever will make the next page into a right page.</dd>
<dt><code>recto</code> {{experimental_inline}}</dt>
<dd>Forces one or two page breaks right before the principal box, whichever will make the next page into a recto page. (A recto page is a right page in a left-to-right spread or a left page in a right-to-left spread.)</dd>
<dt><code>verso</code> {{experimental_inline}}</dt>
<dd>Forces one or two page breaks right before the principal box, whichever will make the next page into a verso page. (A verso page is a left page in a left-to-right spread or a left right in a right-to-left spread.)</dd>
</dl>
<h4 id="Column_break_values">Column break values</h4>
<dl>
<dt><code>avoid-column</code></dt>
<dd>Avoids any column break right before the principal box.</dd>
<dt><code>column</code></dt>
<dd>Forces a column break right before the principal box.</dd>
</dl>
<h4 id="Region_break_values">Region break values</h4>
<dl>
<dt><code>avoid-region</code> {{experimental_inline}}</dt>
<dd>Avoids any region break right before the principal box.</dd>
<dt><code>region</code> {{experimental_inline}}</dt>
<dd>Forces a region break right before the principal box.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<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 Fragmentation', '#break-between', 'break-before')}}</td>
<td>{{Spec2('CSS3 Fragmentation')}}</td>
<td>Adds the <code>recto</code> and <code>verso</code> keywords. Changes the media type of this property from <code>paged</code> to {{xref_cssvisual}}. Defines the breaking algorithm with different kinds of breaks.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-before')}}</td>
<td>{{Spec2('CSS3 Regions')}}</td>
<td>Extends the property to handle region breaks. Adds the <code>avoid-region</code> and <code>region</code> keywords.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-before')}}</td>
<td>{{Spec2('CSS3 Multicol')}}</td>
<td>Initial definition. Extends the CSS 2.1 {{cssxref("page-break-before")}} property to handle both page and column breaks.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("css.properties.break-before")}}</p>
</div>
<p> </p>
|
