CSS page-break-inside用法及代碼示例

CSS中的page-break-inside屬性用於指定頁麵在打印時如何在應用該元素的元素內中斷。它會插入一個分頁符，或者有時用於在打印時避免元素內的分頁符。

用法:

page-break-inside:auto|avoid|initial|inherit

屬性值：

auto:它是默認值。此值自動表示分頁符。
用法:
```
page-break-inside:auto;
```
avoid:它避免了元素內部的分頁符。
用法：
```
page-break-inside:avoid;
```
initial:它將page-break-inside屬性設置為其默認值。
用法：
```
page-break-inside:initial;
```
inherits:page-break-inside屬性是從其父級繼承的。
用法：
```
page-break-inside:inherits;
```

注意：此屬性主要用於打印文檔。

印刷媒體查詢：

@media print {
    img {
        display:block;
        page-break-inside:avoid;
    }
}

範例1：本示例使用page-break-inside屬性值來避免。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        CSS page-break-inside property 
    </title> 
      
    <style type="text/css"> 
        @media print { 
            ul { 
              page-break-inside:avoid; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2>CSS page-break-inside property</h2> 
      
    <br><br><br> 
      
    <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" 
    alt = "" /> 
      
    <br><br><br><br> 
  
    <p> 
        Prepare for the Recruitment drive of product based 
        companies like Microsoft, Amazon, Adobe etc with a 
        free online placement preparation course. The course 
        focuses on various MCQ's & Coding question likely to 
        be asked in the interviews & make your upcoming  
        placement season efficient and successful.  
    </p> 
  
<br><br><br> 
  
    <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
    alt = "" /> 
      
    <ul> 
        <li>Data Structure</li> 
        <li>Algorithms</li> 
        <li>C Programming</li> 
        <li>C++ Programming</li> 
        <li>Java Programming</li> 
        <li>Python Programming</li> 
        <li>PHP Programming</li> 
        <li>Operating System</li> 
        <li>Computer Networks</li> 
        <li>DBMS</li> 
        <li>SQL</li> 
        <li>TOC</li> 
    </ul> 
</body> 
  
</html>

輸出：
打印預覽：

範例2：本示例將page-break-inside屬性值設置為none。

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        CSS page-break-inside property 
    </title> 
      
    <style type="text/css"> 
        @media print { 
            ul { 
              page-break-inside:none; 
            } 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
      
    <h2>CSS page-break-inside property</h2> 
      
    <br><br><br> 
      
    <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png" 
    alt = "" /> 
      
    <br><br><br><br> 
  
    <p> 
        Prepare for the Recruitment drive of product based 
        companies like Microsoft, Amazon, Adobe etc with a 
        free online placement preparation course. The course 
        focuses on various MCQ's & Coding question likely to 
        be asked in the interviews & make your upcoming  
        placement season efficient and successful.  
    </p> 
  
<br><br><br> 
  
    <img src =  
"https://media.geeksforgeeks.org/wp-content/uploads/interview-preparation-2.png"
    alt = "" /> 
      
    <ul> 
        <li>Data Structure</li> 
        <li>Algorithms</li> 
        <li>C Programming</li> 
        <li>C++ Programming</li> 
        <li>Java Programming</li> 
        <li>Python Programming</li> 
        <li>PHP Programming</li> 
        <li>Operating System</li> 
        <li>Computer Networks</li> 
        <li>DBMS</li> 
        <li>SQL</li> 
        <li>TOC</li> 
    </ul> 
</body> 
  
</html>

輸出：
打印預覽：

支持的瀏覽器：下麵列出了page-break-inside屬性支持的瀏覽器：

穀歌瀏覽器1.0
Internet Explorer 8.0
Firefox 19.0
Safari 1.3
Opera 7.0

相關用法

注：本文由純淨天空篩選整理自AkshayGulati大神的英文原創作品 CSS | page-break-inside Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。