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
|
---
title: break-inside
slug: Web/CSS/break-inside
tags:
- CSS
translation_of: Web/CSS/break-inside
---
<div>{{CSSRef}}{{Draft}}</div>
<p><strong><code>break-inside</code></strong> <a href="/en-US/docs/CSS">CSS</a> 属性描述了在多列布局页面下的内容盒子如何中断，如果多列布局没有内容盒子，这个属性会被忽略。</p>
<pre class="brush:css no-line-numbers">break-inside: auto;
break-inside: avoid;
break-inside: avoid-page;
break-inside: avoid-column;
break-inside: avoid-region;
</pre>
<p>在每一个元素的边界，都可能生成一个中断点，这些中断点由三个属性来定义。{{cssxref("break-after")}} 属性定义之前元素的中断点，{{cssxref("break-before")}} 定义了之后元素的中断点， <strong><code>break-inside</code></strong> 定义了当前元素的中断点。</p>
<p>如果需要定义一个中断点，必须遵循以下原则:</p>
<ol>
<li>如果这三个中断属性的值有一个是<em>强制中断值</em>（这些强制中断值包括了 <code>always</code>, <code>left</code>, <code>right</code>, <code>page</code>, <code>column</code>, <code>region</code>），那么这个属性的值就具有优先权。如果其中一个以上是这样的断点，则使用流中最新出现的元素的值。因此，<code>break-before</code>值优先于<code>break-after</code>值，而后者又优先于<code>break-inside</code>值。</li>
<li>如果三个相关值中的任何一个是避免中断值, 相关值包括 <code>avoid</code>, <code>avoid-page</code>, <code>avoid-region</code>, <code>avoid-column</code>, 则在该点上不应用此类中断。</li>
</ol>
<p>一旦应用了强制中断，如果需要，可以添加软中断，但不能在元素边界上添加相应的<code>avoid</code>值。</p>
<p>{{cssinfo}}</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<h3 id="Values">Values</h3>
<dl>
<dt><code>auto</code></dt>
<dd>允许(既不禁止也不强制)在主框中插入任何中断(页、列或区域)。</dd>
<dt><code>avoid-page</code></dt>
<dd>避免主框中任何页的中断点</dd>
<dt><code>avoid-column</code></dt>
<dd>避免主框中任何列的中断点</dd>
<dt><code>avoid-region </code>{{experimental_inline}}</dt>
<dd>避免原则框内的任何区域中断。</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-within', 'break-inside')}}</td>
<td>{{Spec2('CSS3 Fragmentation')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}</td>
<td>{{Spec2('CSS3 Regions')}}</td>
<td>Extends the property to handle region breaks.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}</td>
<td>{{Spec2('CSS3 Multicol')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<div>{{Compat("css.properties.break-inside", 4)}}</div>
|
