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

break-after屬性使您可以在multi-region上下文，分頁媒體和multi-column布局上放置一個分隔符。此屬性描述生成的框後區域，列或分頁符的行為。如果根本沒有生成的框，則忽略此屬性。

用法:

break-after:Generic break values;
/* Or */
break-after:Page break values;
/* Or */
break-after:Column break values;
/* Or */
break-after:Region break values;
/* Or */
break-after:Global values;

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

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

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

<!DOCTYPE html> 
  
<html lang="en"> 
    <head> 
        <style> 
            .Container { 
                column-count:3; 
                column-rule:2px dotted olivedrab; 
            } 
  
            .Container hr { 
                break-after:column; 
            } 
        </style> 
    </head> 
  
    <body> 
        <h1 style="text-align:center; color:green;"> 
            GeeksforGeeks 
        </h1> 
  
        <div class="Container"> 
            <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> 
  
            <hr /> 
  
            <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> 
        </div> 
    </body> 
</html>

輸出：

支持的瀏覽器：

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

相關用法

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