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

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > webkitColumnBreakInside

webkitColumnBreakInside style property

Browser support:

Specifies or retrieves whether a column break should occur inside an element.

Syntax:

object.webkitColumnBreakInside;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: -webkit-column-break-inside

Possible values:

The type of this property is string.

One of the following values:

always

Always force a column break inside the element.

auto

Default. Insert a column break inside the element when necessary.

avoid

Avoid a column break inside 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-inside 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-inside: avoid;
        }
    </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>