Usage of page-break-after attribute in CSS-CSS Tutorial-php.cn

Usage of page-break-after attribute in CSS

黄舟

Release： 2017-07-08 09:59:21

Original

1696 people have browsed it

Do you know the usage of page-break-afterproperty in CSS2.0? Here is a brief description for you. The page-break-after property in CSS includes auto default, always, avoid and inherit, etc. There are several options, please see their specific usage below.

Usage of page-break-after attribute in CSS2.0

page-break-after is a CSS property used to set printing pagination in CSS, supporting all browsing device.

page-break-after has the following options:

◆auto default. Insert a page break after the element if necessary.

◆Always insert a page break after an element.

◆avoid avoids inserting page breaks after elements.

◆leftEnough page breaks after the element until a blank left page.

◆rightAfter the element, there are enough page breaks until a blank right page.

◆inherit specifies that the setting of the page-break-after attribute should be inherited from the parent element .

Our commonly used paging tags are:

Sample code:

<divstyledivstyle="page-break-after:always"> 
<spanstylespanstyle="display:none"> </span> 
</div>

Copy after login

Similarly, we can also set the CSS print style of table. The following is an example. Each table is printed in pages:

Sample code

<html> 
<head> 
<style> 
@mediaprint  
{  
table{page-break-after:always;}  
}  
</style> 
</head> 
<body> 
<table><tr><td>第一个表格</td></tr><tr><td>第一个表格</td></tr></table> 
<table><tr><td>第二个表格</td></tr><tr><td>第二个表格</td></tr></table> 
</body> 
</html>

Copy after login

In the above example, the data of the two tables are printed separately on 2 pages in the print preview. , this is the effect of using the page-break-after attribute.

The above is the detailed content of Usage of page-break-after attribute in CSS. For more information, please follow other related articles on the PHP Chinese website!