Trending October 2023 # A Quick Glance Of Css Page # Suggested November 2023 # Top 12 Popular

You are reading the article A Quick Glance Of Css Page updated in October 2023 on the website Vibergotobrazil.com. We hope that the information we have shared is helpful to you. If you find the content interesting and meaningful, please share it with your friends and continue to follow and support us for the latest updates. Suggested November 2023 A Quick Glance Of Css Page

Introduction to CSS page-break

The following article provides an outline for a CSS page break. Page breaking is an operation where it is defined where a web page will be split when it is printed. CSS provides functionality to define how the document will behave when printed. For page breaking, CSS provides three main properties; these are page-break-before, page-break-after, and page-break-inside. These properties can be applied to individual elements containing content on a web page. Then these properties will break down the page wherever this property has been applied while printing the web page. This property is important to use whenever the content is supposed to be printed, and it should be readable and display more like a book.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

CSS page-break Properties

Given below are the CSS page-break properties:

1. page-break-before

CSS Syntax:

Values:

auto: automatic page breaks. Default value.

always: always page break before the element.

left: insert a page break before the element and format the next page as the left page.

right: insert a page break before the element and format the next page as the right page.

avoid: avoid page break before the element if possible.

initial: set to the default value.

inherit: inherit property from a parent of an element.

Example:

Code:

CSS page break .all-display{ border : #81D4FA 2px solid; background-color : #03a9f400; text-align :left; padding-left : 20px; padding-right: 15px; height : auto; width : auto; } .heading { font-weight: bold; font-size: 15px; width: 95%; } border: 1px solid #ccc; margin-top: 4px; padding: 5px; border-radius: 5px; background-color: azure; } @media print { .content2, .content3 { page-break-before: always; } } Quickly superior disseminate web deliverables applications whereas enabled . Quickly superior disseminate web deliverables applications whereas enabled . Quickly superior disseminate web deliverables applications whereas enabled .

Output:

Print Preview Page 1

Print Preview Page 2

Print Preview Page 3

We have applied the page-break-before property to paragraphs 1 and paragraph 2. This will print each paragraph’s content on each page.

Note: Kindly use the browser’s print preview function to see the print output layout.

2. page-break-after

This property adds a page break after the element on which it is specified. This property cannot be used on empty div elements or elements positioned as absolute.

CSS Syntax:

auto: automatic page breaks. Default value.

always: always page break after the element.

left: insert a page break after the element and format the next page as the left page.

right: insert a page break after the element and format the next page as the right page.

avoid: avoid page breaks after the element if possible.

initial: set to the default value.

inherit: inherit property from a parent of an element.

Example:

Code:

CSS page break .all-display{ border : #81D4FA 2px solid; background-color : #03a9f400; text-align : left; padding-left : 20px; padding-right: 15px; height : auto; width : auto; } .heading { font-weight: bold; font-size: 15px; width: 95%; } border: 1px solid #ccc; margin-top: 4px; padding: 5px; border-radius: 5px; background-color: azure; } @media print { .content2 { page-break-after: always; } } Quickly superior disseminate web deliverables applications whereas enabled . Quickly superior disseminate web deliverables applications whereas enabled . Quickly superior disseminate web deliverables applications whereas enabled .

Output:

Print Preview Page 1

Print Preview Page 2

Output on a web page will be the same. Still, as we have applied the page-break-after property to the second paragraph and set a property to always, this will apply page break after the second paragraph, and paragraph 3 will be displayed on the second page.

3. page-break-inside

This property tries to avoid the page break in the element on which it is specified. This property cannot be used on elements positioned as absolute.

CSS Syntax:

auto: automatic page breaks. Default value.

avoid: avoid page breaks inside the element if possible.

initial: set to the default value.

inherit: inherit property from a parent of an element.

Example:

Code:

CSS page break .all-display{ border : #81D4FA 2px solid; background-color : #03a9f400; text-align : left; padding-left : 20px; padding-right: 15px; height : auto; width : auto; } .heading { font-weight: bold; font-size: 15px; width: 95%; } border: 1px solid #ccc; margin-top: 4px; padding: 5px; border-radius: 5px; background-color: azure; letter-spacing: 30px; } .content1, .content2, .content3 { margin-top: 30px; margin-bottom: 10px; } @media print { .content1, .content2, .content3 { page-break-inside: avoid; } } Quickly superior disseminate web deliverables applications whereas enabled . Quickly superior disseminate web deliverables applications whereas enabled . Quickly superior disseminate web deliverables applications whereas enabled .

Output:

Print Preview Page 1

Print Preview Page 2

Here, we have adjusted CSS properties so that the contents of the paragraph will split into multiple pages while printing it. Try to run this example without and with the page-break-inside property and see the print preview output. In the second case, the print output will contain all paragraphs with all content on the same page.

Conclusion

Page break allows us to specify the breaks on elements while printing the page. We can also avoid page breaks inside. CSS provides mainly three properties to achieve this.