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.

html

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

HTML DOM Style orphans Property

Explore