Control page Page-break-after properties in CSS

Source: Internet
Author: User
Tags blank page
The Page-break-before and Page-break-after CSS properties do not modify the display of the page on the screen, and these properties are used to control how the file is printed. Each print property can have 4 sets of settings: Auto, always, left, and right. Where auto is the default value, you only need to set the paging symbol (page breaks) if necessary. If Page-break-before is set to always, the printer restarts a new printed page when a particular component is encountered. If Page-break-before is set to left, a paging symbol is inserted until the specified component appears on a blank page on the right. Page-break-before if set to right, the page symbol is inserted until the specified component appears on a blank page on the left. The Page-break-after property adds the paging symbol to the specified component, not before. In the following

You will be able to see the settings for these properties in the program,


Page-break-after is the CSS property used in CSS to set the print paging, and supports all browsers.

Page-break-after has the following options:

Auto Default. If necessary, insert a page break after the element.
Always inserts a page break after the element.
Avoid avoid inserting page breaks after the element.
Left has enough page breaks after the element to go up to a blank page.
Right has enough page breaks after the element to go up to the left of a blank page.
Inherit specifies that the settings for the Page-break-after property should be inherited from the parent element.
The page tabs we use are:

[CSS Online]-sample code <p style= "Page-break-after:always" ><span style= "Display:none" >&nbsp;</span> </p>
Also, we can set the CSS print style for the table. Here is an example, where each table is printed on a paginated page:

[CSS Online]-Sample code



In the above example, two tables of data are printed separately on 2 pages in print Preview, which is the effect of using the Page-break-after property.

Please note: The middle of a table is each method paged.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.