page-break-before property
Sets or retrieves a string indicating whether a page break occurs before the object.
![]() |
Syntax
page-break-before: auto | always | avoid | left | right | inherit
Property values
always-
Always insert a page break before the object.
auto-
Default. Neither force nor forbid a page break before the object.
avoid-
Internet Explorer 8. Forbid a page break before the object, if possible.
empty string-
Behaves the same as auto.
inherit-
Internet Explorer 8. Inherit the value of the same property for the object's parent.
left-
Currently behaves the same as always.
right-
Currently behaves the same as always.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | no |
| Initial Value |
Standards information
- CSS 2.1, Section 13.3.1
Remarks
This property applies when printing the document. This property does not apply to the br or hr elements.
If there are conflicts between the value of this property and the page-break-after property of the object previously displayed in the browser, the value that results in the largest number of page breaks is used.
Page breaks are not permitted inside positioned objects.
Examples
The following examples use the page-break-before attribute and the page-break-before property to start printing on a new page.
This example uses the hn element as a selector in an embedded style sheet to break the page before all hn headings.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/page-break-before.htm
<html>
<head>
<style type="text/css">
h3 {
page-break-before: always;
}
</style>
</head>
<body>
<p>
:
</p>
<h3>Start New Section on New Page</h3>
</body>
</html>
This example uses a button to turn off the page break before the object that has an ID value of oPrgrph. When the page is printed or previewed, a page break occurs before the first paragraph unless the user clicks the button.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/pagebreakBefore.htm
<html>
<head>
<script type="text/javascript">
function offBreak()
{
oPrgrph.style.pageBreakBefore="";
}
</script>
</head>
<body>
<button onclick="offBreak()">Turn Off Break</button>
<p id="oPrgrph" style="page-break-before: always">
:
</p>
</body>
</html>
See also
- CSSStyleDeclaration
- currentStyle
- runtimeStyle
- style
- Reference
- page-break-inside
- page-break-after
- Conceptual
- CSS How-to - Optimize Pages for Printing Using CSS
Send comments about this topic to Microsoft
Build date: 11/29/2012
