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

CSS break-before屬性用於提及分頁符，區域符或列符是否應在元素之前出現。如果沒有生成的框，則忽略此屬性。

用法:

break-before:Generic break values;

或者

break-before:Page break values;

或者

break-before:Column break values;

或者

break-before:Region break values;

或者

break-before:Global values;

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

通用中斷值：此屬性指的是由auto定義的值，避免，總是，等等。
分頁符值：此屬性指的是頁麵，avoid-page，左，右，直腸，反麵等定義的值。
列中斷值：此屬性引用由列avoid-column等定義的值。
區域中斷值：此屬性引用由region，avoid-region等定義的值。
Global values:此屬性指的是由herit，initial，unset等定義的值。

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <style> 
        h1 { 
            color:#008000; 
            text-align:center; 
            font-size:3rem; 
            column-span:all; 
        } 
  
        h2 { 
            color:green; 
            break-before:column; 
        } 
  
        p { 
            line-height:1.5; 
        } 
  
        div { 
            column-width:250px; 
            gap:30px; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <h1>GeeksforGeeks</h1> 
  
        <h2>geek 1</h2> 
  
        <p> 
            Computer Science portal 1 
            Computer Science portal 1 
            Computer Science portal 1 
            Computer Science portal 1 
            Computer Science portal 1 
            Computer Science portal 1 
            Computer Science portal 1 
            Computer Science portal 1 
            Computer Science portal 1 
        </p> 
  
        <h2>geek 2</h2> 
  
        <p> 
            Computer Science portal 2 
            Computer Science portal 2 
            Computer Science portal 2 
            Computer Science portal 2 
            Computer Science portal 2 
            Computer Science portal 2 
            Computer Science portal 2 
            Computer Science portal 2 
            Computer Science portal 2 
        </p> 
  
        <h2>geek 3</h2> 
  
        <p> 
            Computer Science portal 3 
            Computer Science portal 3 
            Computer Science portal 3 
            Computer Science portal 3 
            Computer Science portal 3 
            Computer Science portal 3 
            Computer Science portal 3 
            Computer Science portal 3 
            Computer Science portal 3 
        </p> 
    </div> 
</body> 
  
</html>

輸出：

支持的瀏覽器：

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

相關用法

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