In order to access this site you need to enable JavaScript!

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>