MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Revision 290843 of break-after

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

Revision Content

{{ CSSRef() }}

Summary

The <break-after> CSS property describe how the page, column or region break behavior after the generated box. If there is no generated box, the property is ignored.

  • {{ Xref_cssinitial() }}: auto
  • Applies to: block-level elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ xref_cssvisual() }}
  • {{ 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
break-after: auto
break-after: always
break-after: avoid
break-after: left
break-after: right
break-after: page
break-after: column
break-after: avoid-page
break-after: avoid-column

Values

auto
Initial value. Allows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted after the principle box.
always
Always force page breaks after the principle box. This is a synonym of page, it has been kept to facilitate transition from {{ cssxref("page-break-after") }} which is subset of this property.
avoid
Prevent any break, either page, column or region, to be inserted right after the principle box.
left
Force one or two page breaks right after the principle box so that the next page is formatted as a left page.
right
Force one or two page breaks right after the principle box so that the next page is formatted as a right page.
page
Always force one page break right after the principle box.
column
Always force one column break right after the principle box.
region {{ experimental_inline() }}
Always force one region break right after the principle box.
recto {{ experimental_inline() }}
Force one or two page breaks right after the principle box so that next page is formatted as a recto page, that is a right page in a left-to-right spread or a left page in a right-to-left spread.
verso {{ experimental_inline() }}
Force one or two page breaks right after the principle box so that next page is formatted as a verso page, that is a left page in a left-to-right spread or a left right in a right-to-left spread.
avoid-page
Avoid any page break right after the principle box.
avoid-column
Avoid any column break right after the principle box.
avoid-region {{ experimental_inline() }}
Avoid any region break right after the principle box.
 

Examples

 

Specifications

Specification Status Comment
CSS Fragmentation Level 3 {{ Spec2('CSS3 Fragmentation') }} Adds support for breaks in relation with regions and the recto and verso keywords. Change sthe media type of this property from paged to {{ xref_cssvisual() }}. Precise the breaking algorithm with so many different kinds of breaks.
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>
<p>The <code>&lt;break-after&gt;</code> <a href="/en-US/docs/CSS">CSS</a> <a href="/en-US/docs/CSS/CSS_property">property</a> describe how the page, column or region break behavior after the generated box. If there is no generated box, the property is ignored.</p>
<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> {{ xref_cssvisual() }}</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>
break-after: auto
break-after: always
break-after: avoid
break-after: left
break-after: right
break-after: page
break-after: column
break-after: avoid-page
break-after: avoid-column
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    Initial value. Allows, meaning neither forbid nor force, any break (either page, column or region) to be be inserted after the principle box.</dd>
  <dt>
    <code>always</code></dt>
  <dd>
    Always force page breaks after the principle box. This is a synonym of <code>page</code>, it has been kept to facilitate transition from {{ cssxref("page-break-after") }} which is subset of this property.</dd>
  <dt>
    <code>avoid</code></dt>
  <dd>
    Prevent any break, either page, column or region, to be inserted right after the principle box.</dd>
  <dt>
    <code>left</code></dt>
  <dd>
    Force one or two page breaks right after the principle box so that the next page is formatted as a left page.</dd>
  <dt>
    <code>right</code></dt>
  <dd>
    Force one or two page breaks right after the principle box so that the next page is formatted as a right page.</dd>
  <dt>
    <code>page</code></dt>
  <dd>
    Always force one page break right after the principle box.</dd>
  <dt>
    <code>column</code></dt>
  <dd>
    Always force one column break right after the principle box.</dd>
  <dt>
    <code>region </code>{{ experimental_inline() }}</dt>
  <dd>
    Always force one region break right after the principle box.</dd>
  <dt>
    <code>recto</code> {{ experimental_inline() }}</dt>
  <dd>
    Force one or two page breaks right after the principle box so that next page is formatted as a recto page, that 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>
    Force one or two page breaks right after the principle box so that next page is formatted as a verso page, that is a left page in a left-to-right spread or a left right in a right-to-left spread.</dd>
  <dt>
    <code>avoid-page</code></dt>
  <dd>
    Avoid any page break right after the principle box.</dd>
  <dt>
    <code>avoid-column</code></dt>
  <dd>
    Avoid any column break right after the principle box.</dd>
  <dt>
    <code>avoid-region </code>{{ experimental_inline() }}</dt>
  <dd>
    Avoid any region break right after the principle box.</dd>
  <dt>
    &nbsp;</dt>
</dl>
<h2 id="Examples">Examples</h2>
<p>&nbsp;</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&nbsp;3</a></td>
      <td>{{ Spec2('CSS3 Fragmentation') }}</td>
      <td>Adds support for breaks in relation with regions and the <code>recto</code> and <code>verso</code> keywords. Change sthe media type of this property from <code>paged</code> to {{ xref_cssvisual() }}. Precise the breaking algorithm with so many different kinds of breaks.</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