initial commit

1 files changed, 82 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/break-inside/index.html b/files/zh-cn/web/css/break-inside/index.html
new file mode 100644
index 0000000000..de1065b17e
--- /dev/null
+++ b/files/zh-cn/web/css/break-inside/index.html
@@ -0,0 +1,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>