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>
      
        <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:

    • 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.