mozilla

Revision 290709 of break-after

  • Revision slug: CSS/break-after
  • Revision title: break-after
  • Revision id: 290709
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

  • {{ Xref_cssinitial() }}: auto
  • Applies to: block-level elements
  • {{ Xref_cssinherited() }}: no
  • Media: paged
  • {{ Xref_csscomputed() }}: as specified
  • {{ Xref_cssanimatable() }}: no
  • {{ Xref_csscanonicalorder() }}: the unique non-ambiguous order defined by the formal grammar

Syntax

Formal grammar: auto | always | avoid | left | right | page | column | avoid-page | avoid-column
page-break: auto
page-break: always
page-break: avoid
page-break: left
page-break: right
page-break: page
page-break: column
page-break: avoid-page
page-break: avoid-column

Values

auto
Initial value. Automatic page/column/region breaks (neither forced nor forbidden) can be inserted after the generated box.
always
Always force page breaks after the generated box.
avoid
Avoid page and column breaks after the generated box.
left
Force one or two page breaks after the element so that the next page is formatted as a left page.
right
Force one or two page breaks after the element so that the next page is formatted as a right page.
page
1
column
1
region
1
recto
1
verso
1
avoid-page
1
avoid-column
1
avoid-region
1
 

Examples

 

Specifications

Specification Status Comment
CSS Fragmentation Level 3 {{ Spec2('CSS3 Fragmentation') }} Add support for breaks in relation with regions and the recto and verso keywords.
CSS Multi-column Layout Module {{ Spec2('CSS3 Multicol') }} Initial specification. Extends the CSS 2.1 {{ cssxref("page-break-after") }} property to handle both page and column breaks.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • {{ CSS_Reference:Columns() }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> <code>auto</code></li>
  <li><dfn>Applies to:</dfn> block-level elements</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Media:</dfn> <code>paged</code></li>
  <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
  <li><dfn>{{ Xref_cssanimatable() }}:</dfn> no</li>
  <li><dfn>{{ Xref_csscanonicalorder() }}:</dfn> the unique non-ambiguous order defined by the formal grammar</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">Formal grammar: auto | always | avoid | left | right | page | column | avoid-page | avoid-column
</pre>
<pre>page-break: auto
page-break: always
page-break: avoid
page-break: left
page-break: right
page-break: page
page-break: column
page-break: avoid-page
page-break: avoid-column
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    Initial value. Automatic page/column/region breaks (neither forced nor forbidden) can be inserted after the generated box.</dd>
  <dt>
    <code>always</code></dt>
  <dd>
    Always force page breaks after the generated box.</dd>
  <dt>
    <code>avoid</code></dt>
  <dd>
    Avoid page and column breaks after the generated box.</dd>
  <dt>
    <code>left</code></dt>
  <dd>
    Force one or two page breaks after the element so that the next page is formatted as a left page.</dd>
  <dt>
    <code>right</code></dt>
  <dd>
    Force one or two page breaks after the element so that the next page is formatted as a right page.</dd>
  <dt>
    <code>page</code></dt>
  <dd>
    1</dd>
  <dt>
    <code>column</code></dt>
  <dd>
    1</dd>
  <dt>
    <code>region</code></dt>
  <dd>
    1</dd>
  <dt>
    <code>recto</code></dt>
  <dd>
    1</dd>
  <dt>
    <code>verso</code></dt>
  <dd>
    1</dd>
  <dt>
    <code>avoid-page</code></dt>
  <dd>
    1</dd>
  <dt>
    <code>avoid-column</code></dt>
  <dd>
    1</dd>
  <dt>
    <code>avoid-region</code></dt>
  <dd>
    1</dd>
  <dt>
     </dt>
</dl>
<h2 id="Examples">Examples</h2>
<p> </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><a href="http://dev.w3.org/csswg/css3-break/#break-after" title="http://dev.w3.org/csswg/css3-break/#break-after">CSS Fragmentation Level 3</a></td>
      <td>{{ Spec2('CSS3 Fragmentation') }}</td>
      <td>Add support for breaks in relation with regions and the <code>recto</code> and <code>verso</code> keywords.</td>
    </tr>
    <tr>
      <td><a class="external" href="http://dev.w3.org/csswg/css3-multicol/#break-after" lang="en" title="http://dev.w3.org/csswg/css3-animations/#the-animation-delay-property-">CSS Multi-column Layout Module</a></td>
      <td>{{ Spec2('CSS3 Multicol') }}</td>
      <td>Initial specification. Extends the CSS 2.1 {{ cssxref("page-break-after") }} property to handle both page and column breaks.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Columns() }}</li>
</ul>
Revert to this revision