You are here: Reference > CSS > properties > browser specific extensions > -webkit-column-break-after

-webkit-column-break-after property

Browser support:
Specifies whether a column break should occur after an element.
JavaScript page for this property: webkitColumnBreakAfter. You can find other example(s) there.

Possible values:

 One of the following values: 
always
Always force a column break after the element.
auto
Default. Insert a column break after the element when necessary.
avoid
Avoid a column break after the current element.
inherit
Takes the value of this property from the computed style of the parent element.
Default: auto.

Example HTML code 1:

This is only a demonstration of how the -webkit-column-break-after property should work, but it doesn't take any effect in Google Chrome and Safari:
<head>
    <style>
        #container { 
            -webkit-column-count: 4;
            -webkit-column-width: 140px;
            -webkit-column-rule-width : 3px;
            -webkit-column-rule-style : solid;
            -webkit-column-rule-color : red;
        } 
        h1 {
            -webkit-column-break-after: always;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>The header of the first column</h1>
        Some content within
        <h1>The header of the second column</h1>
        Some content within
        <h1>The header of the third column</h1>
        Some content within
        <h1>The header of the fourth column</h1>
        Some content within
    </div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content