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.

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

ChinkitManchanda

Improve

Article Tags :

HTML DOM Style orphans Property

Similar Reads