The page-break-before property in CSS is used to add a page-break-before the specified element. This property helps to define how a document should behave when it is printed. Similarly page-break-before, page-break-after and page-break-inside all three properties are instrumental in determining and hence defining how the resultant document would be when printed.
Note: The page-break-before property cannot be used on absolutely positioned elements or an empty element. Use break-before property instead of page-break-before.
Syntax:
page-break-before: auto|always|avoid|left|right|initial|inherit;
Values:
- auto : Refers to automatic page-break.
page-break-before: auto;
HTML
<!DOCTYPE html> <html>
<head>
<title>
page-break-before: auto;
</title>
</head>
<body>
<p style= "page-break-before:auto;">
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
<p>
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>
|
- always: Page break is inserted after specified element box always.
page-break-before:always;
HTML
<!DOCTYPE html> <html>
<head>
<title>
page-break-before: always;
</title>
</head>
<body>
<p style= "page-break-before:always;">
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions).
</p>
<p>
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>
|
- avoid: Page break is avoided whenever possible.
page-break-before:avoid;
HTML
<!DOCTYPE html> <html>
<head>
<title>
page-break-before: avoid;
</title>
</head>
<body>
<p style= "page-break-before:avoid;">
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
<p>
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>
|
- left: Page break is inserted such that next page is depicted as the left page.
page-break-before:left;
HTML
<!DOCTYPE html> <html>
<head>
<title>
page-break-before: left;
</title>
</head>
<body>
<p style= "page-break-before:left;">
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
<p>
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>
|
- right: Page break is inserted such that next page is depicted as the right page.
page-break-before:right;
HTML
<!DOCTYPE html> <html>
<head>
<title>
page-break-before: right;
</title>
</head>
<body>
<p style= "page-break-before:right;">
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
<p>
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>
|
- initial: Property is set to default
page-break-before:initial
HTML
<!DOCTYPE html> <html>
<head>
<title>
page-break-before:initial;
</title>
</head>
<body>
<p style= "page-break-before:initial;">
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
<p>
The oldest classical Greek and Latin
writing had little or no space between
words and could be written in boustrophedon
(alternating directions). Over time, text
direction (left to right) became standardized,
and word dividers and terminal punctuation
became common.
</p>
Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>
|
- inherit: Property is inherited from parent element
page-break-before:inherit;
HTML
<!DOCTYPE html> <html>
<head>
<title>css_page_break_before</title>
<style>
p {
page-break-before:always;
}
div{
page-break-before:default;
}
#c1{
page-break-before:left;
}
#c2{
page-break-before:inherit;
}
</style>
</head>
<body>
<p>
The oldest classical Greek and Latin writing had little or
no space between words and could be written in boustrophedon
(alternating directions). Over time, text direction (left to
right) became standardized, and word dividers and terminal
punctuation became common. The first way to divide sentences
into groups was the original paragraphos, similar to an
underscore at the beginning of the new group.
</p>
<div>
<p id="c2">
Indented paragraphs demonstrated in the US Constitution
In ancient manuscripts, another means to divide sentences
into paragraphs was a line break (newline) followed by an
initial at the beginning of the next paragraph. An initial
is an oversized capital letter, sometimes outdented beyond
the margin of the text. This style can be seen, for example,
in the original Old English manuscript of Beowulf.
</p>
</div>
<p id="c1">
A second common modern English style is to use no indenting,
but add vertical white space to create "block paragraphs." On
a typewriter, a double carriage return produces a blank line
for this purpose; professional typesetters (or word processing
software) may put in an arbitrary vertical space by adjusting
leading.
</p>
Text credits :https://en.wikipedia.org/wiki/Paragraph
</body>
</html>
|
Note: The outcome of page-break-before property can be best viewed by opting for print preview of the webpage of the given HTML code. Create a similar code on your text editor like notepad++ and opt for print preview of the webpage created. Do try it for a better understanding.
Supported Browsers: The browsers supported by CSS page-break-before Property are listed below:
- Google Chrome 1+
- Edge 12+
- Firefox 1+
- Opera 7+
- Safari 1.2+