Skip to content
Related Articles

Related Articles

HTML | DOM Style orphans Property
  • Difficulty Level : Basic
  • Last Updated : 01 Aug, 2019

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.




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

    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
  • Recommended Articles
    Page :