Skip to content
Related Articles

Related Articles

HTML | DOM Style columnFill Property
  • Last Updated : 31 Jul, 2019

HTML DOM Style columnFill Property specifies how to fill a column(balanced or not).
Syntax:

  • To get the columnFill property
    object.style.columnFill
    
  • To set the columnFill property
    object.style.columnFill= "balance|initial|auto|inherit"
  • Property Values:

  • balance: it balances columns(Default).
  • auto: Columns will have different lengths & filled sequentially.
  • initial: sets the value to default.
  • inherit: Inherit value from parent.
  • Example:




    <!DOCTYPE html>
    <html>
    <head>
        <title>
          HTML | DOM Style columnFill Property
        </title>
    </head>
    <body>
      
        <div id="example">
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal. 
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal. 
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal. 
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal. 
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal. 
          GEEKSFORGEEKS welcomes you to the learning portal. 
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
          GEEKSFORGEEKS welcomes you to the learning portal.
      
        </div>
        <button onclick="split()">click</button>
      
        <script>
            function split() {
      
                document.getElementById(
                  "example").style.columnFill = "auto";
            }
        </script>
      
    </body>
      
    </html>

    
    

    Note: The CCSS3 column-fill Property is supported in “13.0 -moz-“.

    Supported Browsers: The major browsers are not supported by HTML | DOM Style columnFill Property.

    full-stack-img




    My Personal Notes arrow_drop_up
    Recommended Articles
    Page :