page-break-after

  • Revision slug: CSS/page-break-after
  • Revision title: page-break-after
  • Revision id: 25316
  • Created:
  • Creator: jojomojo
  • Is current revision? No
  • Comment 1 words added

Revision Content

{{ CSSRef() }}

Summary

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

  • {{ Xref_cssinitial() }}: {{ Cssxref("auto") }}
  • Applies to: block elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}, paged
  • {{ Xref_csscomputed() }}: as specified

Syntax

page-break-after: auto | always | avoid | left | right | inherit

Values

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

Examples

/* display headlines on a new page */
h1,h2, h3 { page-break-after:always; } 

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.0) [*] 4.0 7.0 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Browser compatibility

Browser lowest version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0) [*]
Opera 7.0
Safari (WebKit) 1.2 (125)

[*] Gecko only supports page-break-after:always. See {{ bug("132035") }}

Specification

See also

{{ languages( {"de": "de/CSS/page-break-after" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The <code>page-break-after</code> CSS property adjusts page breaks <em>after</em> the current element.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("auto") }}</li> <li>Applies to: block elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}, paged</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">page-break-after: auto | always | avoid | left | right | inherit
</pre>
<h3>Values</h3>
<dl> <dt>auto</dt> <dd>Initial value. Automatic page breaks (neither forced nor forbidden).</dd> <dt>always</dt> <dd>Always force page breaks after the element.</dd> <dt>avoid {{ Unimplemented_inline() }}</dt> <dd>Avoid page breaks after the element.</dd> <dt>left {{ Unimplemented_inline() }}</dt> <dd>Force page breaks after the element so that the next page is formatted as a left page.</dd> <dt>right {{ Unimplemented_inline() }}</dt> <dd>Force page breaks after the element so that the next page is formatted as a right page.</dd>
</dl>
<h3>Examples</h3>
<pre>/* display headlines on a new page */
h1,h2, h3 { page-break-after:always; } 
</pre>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<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>1.0</td> <td>1.0 (1.0) [*]</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 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>
<h3>Browser compatibility</h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>lowest version</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0) [*]</td> </tr> <tr> <td>Opera</td> <td>7.0</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.2 (125)</td> </tr> </tbody>
</table>
<p>[*] Gecko only supports <code>page-break-after:always</code>. See {{ bug("132035") }}</p>
<h3>Specification</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-page/#page-break-after" lang="en">CSS 3 Paged Media #page-break-after</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS2/page.html#propdef-page-break-after" lang="en">CSS 2.1 Paged Media #page-break-after</a></li>
</ul>
<h3>See also</h3>
<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>
<p>{{ languages( {"de": "de/CSS/page-break-after" } ) }}</p>
Revert to this revision