HTML DOM Style orphans Property

Last Updated : 17 Aug, 2023

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.