page-break-after

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

Revision Content

{{ CSSRef() }}

Summary

The page-break-after CSS property adjusts page breaks after the current element.

This properties applies to block elements that generate a box. It won't apply on an empty {{ HTMLElement("div") }} that won't generate a box.

Note: this property is in progress of being replaced by the more generic {{ cssxref("break-after")}}. This new property also handles column and region breaks and is syntactically compatible with page-break-after.

Before using page-break-after, check if you can use break-after instead. In the future page-break-after will be a mere alias for some values of it.

  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
  • Applies to: block 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-break-after: auto
page-break-after: always
page-break-after: avoid
page-break-after: left
page-break-after: right

page-break-after: inherit

Values

auto
Initial value. Automatic page breaks (neither forced nor forbidden).
always
Always force page breaks after the element.
avoid
Avoid page breaks after the element.
left
Force page breaks after the element so that the next page is formatted as a left page.
right
Force page breaks after the element so that the next page is formatted as a right page.

Examples

/* move to a new page after footnotes */
div.footnotes { 
  page-break-after:always; 
} 

Specification

Specification Status Comment
CSS Paged Media Module Level 3 {{ Spec2('CSS3 Paged Media') }} Extends the element that this property applies to table rows and table row groups.
CSS Level 2 (Revision 1) {{ Spec2('CSS2.1') }} Initial specification.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (auto, always) 1.0 {{ CompatGeckoDesktop("1.0") }} 4.0 7.0 1.2 (125)
avoid, left, right 1.0 {{ CompatNo() }} ({{ bug("132035") }}) 4.0 7.0 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatGeckoMobile("1.0") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
avoid, left, right {{ CompatUnknown() }} {{ CompatNo() }} ({{ bug("132035") }}) {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>page-break-after</code> CSS property adjusts page breaks <em>after</em> the current element.</p>
<p>This properties applies to block elements that generate a box. It won't apply on an empty {{ HTMLElement("div") }} that won't generate a box.</p>
<div class="note style-wrap">
  <p><strong>Note:</strong> this property is in progress of being replaced by the more generic {{ cssxref("break-after")}}. This new property also handles column and region breaks and is syntactically compatible with <code>page-break-after</code>.</p>
  <p>Before using <code>page-break-after</code>, check if you can use <code>break-after</code> instead. In the future <code>page-break-after</code> will be a mere alias for some values of it.</p>
</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("auto") }}</li>
  <li><dfn>Applies to:</dfn> block elements</li>
  <li><dfn>{{ Xref_cssinherited() }}:</dfn> no</li>
  <li><dfn>Media:</dfn> paged</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
</pre>
<pre>
page-break-after: auto
page-break-after: always
page-break-after: avoid
page-break-after: left
page-break-after: right

page-break-after: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    Initial value. Automatic page breaks (neither forced nor forbidden).</dd>
  <dt>
    <code>always</code></dt>
  <dd>
    Always force page breaks after the element.</dd>
  <dt>
    <code>avoid</code></dt>
  <dd>
    Avoid page breaks after the element.</dd>
  <dt>
    <code>left</code></dt>
  <dd>
    Force page breaks after the element so that the next page is formatted as a left page.</dd>
  <dt>
    <code>right</code></dt>
  <dd>
    Force page breaks after the element so that the next page is formatted as a right page.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre class="brush: css">
/* move to a new page after footnotes */
div.footnotes { 
  page-break-after:always; 
} 
</pre>
<h2 id="Specification">Specification</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-page/#page-break-after">CSS Paged Media Module Level&nbsp;3</a></td>
      <td>{{ Spec2('CSS3 Paged Media') }}</td>
      <td>Extends the element that this property applies to table rows and table row groups.</td>
    </tr>
    <tr>
      <td><a class="external" href="http://www.w3.org/TR/CSS2/page.html#propdef-page-break-after" lang="en">CSS Level&nbsp;2 (Revision&nbsp;1)</a></td>
      <td>{{ Spec2('CSS2.1') }}</td>
      <td>Initial specification.</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 (<code>auto</code>, <code>always</code>)</td>
        <td>1.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>4.0</td>
        <td>7.0</td>
        <td>1.2 (125)</td>
      </tr>
      <tr>
        <td><code>avoid</code>, <code>left</code>, <code>right</code></td>
        <td>1.0</td>
        <td>{{ CompatNo() }} ({{ bug("132035") }})</td>
        <td>4.0</td>
        <td>7.0</td>
        <td>1.2 (125)</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&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoMobile("1.0") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>avoid</code>, <code>left</code>, <code>right</code></td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }} ({{ bug("132035") }})</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en/CSS/page-break-before" title="en/CSS/page-break-before"><code>page-break-before</code></a>, <a href="/en/CSS/page-break-inside" title="en/CSS/page-break-inside"><code>page-break-inside</code></a></li>
  <li><a href="/en/CSS/orphans" title="de/CSS/orphans"><code>orphans</code></a>, <a href="/en/CSS/widows" title="en/CSS/widows"><code>widows</code></a></li>
</ul>
Revert to this revision