HTML | DOM Style orphans Property

The DOM Style orphans property controls the minimum number of lines in a paragraph split on the old page. The default value for orphans is inherited or 2(which means a minimum of 2 lines will be left on the page if a paragraph is going to get split).
The DOM Style orphans property controls the minimum number of lines in a paragraph split on the old page. The default value for orphans is inherited or 2(which means a minimum of 2 lines will be left on the page if a paragraph is going to get split).

Syntax:

  • Return the orphans property:
    object.style.orphans
  • Set the orphans property:
    object.style.orphans = "number|initial|inherit"

    Property Values:

    • Number: An integer which specifies the number of lines that can be left at the end of a page or column. Negative values are not allowed.Default value is 2.
    • Initial: Sets the element to its initial value.
    • Inherit: The Element inherits its orphans property from parent element.

    Example-1: Set number of liones for orphans property.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            HTML | DOM Style orphans Property
        </title>
        <div id="element">
            <p>
              Cascading Style Sheets (CSS) is a style
              sheet language used for describing the 
              presentation of a document written in a
              markup language like HTML.[1] CSS is a 
              cornerstone technology of the World Wide 
              Web, alongside HTML and JavaScript.
            </p>
      
            <p
              <span style="color: red; font-weight: bold">
                CSS is designed to enable the separation 
                of presentation and content, including 
                layout,colors, and fonts.CSS has a simple
                syntax and uses a number of English keywords
                to specify the names of various style 
                properties.A style sheet consists of a list 
                of rules. Each rule or rule-set consists of
                one or more selectors,and a declaration block.
              </span>
            </p>
      
            <p>
              This separation can improve content accessibility,
              provide more flexibility and control in the 
              specification of presentation characteristics,
              enable multiple web pages to share formatting 
              by specifying the relevant CSS in a separate .css 
              file, and reduce complexity and repetition in 
              the structural content.
            </p>
      
            <p>
              Separation of formatting and content also makes
              it feasible to present the same markup page in 
              different styles for different rendering methods, 
              such as on-screen, in print, by voice 
              (via speech-based browser or screen reader), 
              and on Braille-based tactile devices. CSS also
              has rules for alternate formatting if the content
              is accessed on a mobile device.
            </p>
            <p>
              The name cascading comes from the specified 
              priority scheme to determine which style rule
              applies if more than one rule matches a particular
              element. This cascading priority scheme is predictable.
            </p>
      
        </div>
        <style>
            #element {
                columns: 12em 3;
                column-gap: 3em;
            }
        </style>
      
        <script>
            function myFunction() {
      
                // Number of lines that can be left at the end 
                // of a page or column.
                document.getElementById("element").style.orphans = 
                                                              "5";
            }
            myFunction()
        </script>
      
    </head>
      
    </html>

    chevron_right

    
    

    Output : As per orphans property, minimum of 5 lines will be left on the page or column(as we set orphans property “5” in the code) if a paragraph is going to split.

    Supported Browsers: The browser supported by HTML | DOM Style orphans Property are listed below:

    • Google Chrome 25+
    • Internet Explorer 8+
    • Opera 9.2+


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.