CSS break-inside屬性用法及代碼示例

break-inside屬性使您可以防止在multi-region上下文，multi-column布局以及分頁媒體中無用的中斷。此屬性設置區域，列或分頁符在生成的框內應如何表現。如果沒有生成的框，則忽略此屬性。

用法:

break-inside:Keywor_values;
/* Or */
break-inside:Global_values;

屬性值：該屬性接受上麵提到的和下麵描述的屬性值：

Keyword_values:此屬性引用的值定義為auto，void，avoid-page，avoid-column，avoid-region等。
Global_values:此屬性引用定義為初始，繼承，未設置等的值。

例：下麵的示例說明了break-inside屬性的用法

<!DOCTYPE html> 
  
<html lang="en"> 
  
    <head> 
        <style> 
  
            .Container { 
                column-count:3;  
                column-rule:2px dotted coral; 
            } 
  
            .Container ul { 
                break-inside:avoid; 
            } 
  
        </style> 
    </head> 
    <body> 
  
        <h1 style="text-align:center;  
                color:green;"> 
                GeeksforGeeks 
        </h1> 
  
        <div class="Container"> 
            <h3>Geek</h3> 
            <p> 
                Computer Science Portal !! 
                Computer Science Portal !! 
                Computer Science Portal !! 
                Computer Science Portal !! 
                Computer Science Portal !! 
                Computer Science Portal !! 
            </p> 
  
            <ul> 
                <li>Computer Science Portal !!</li> 
                <li>Computer Science Portal !!</li> 
                <li>Computer Science Portal !!</li> 
                <li>Computer Science Portal !!</li> 
                <li>Computer Science Portal !!</li> 
                <li>Computer Science Portal !!</li> 
            </ul> 
  
            <p> 
                Computer Science Portal !! 
                Computer Science Portal !! 
                Computer Science Portal !! 
                Computer Science Portal !! 
                Computer Science Portal !! 
                Computer Science Portal !! 
            </p> 
                      
          </div> 
    </body> 
  
</html>

輸出：

支持的瀏覽器：

Chrome
Firefox(部分受支持)
Opera
Safari(部分受支持)
Edge
IE瀏覽器

相關用法

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