Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to set the minimum number of lines for an element that must be visible at the top of a page in JavaScript?

Javascript Object Oriented Programming Front End Technology

The orphans CSS property sets the minimum number of lines in a block container that must be shown at the top of a page when a page break occurs. In JavaScript, you can control this property through the DOM to manage print layout behavior.

Syntax

// Get the orphans value
var orphansValue = element.style.orphans;

// Set the orphans value
element.style.orphans = "number|initial|inherit";

Parameters

Value Description
number Minimum number of lines (default is 2)
initial Sets to default value
inherit Inherits from parent element

Example: Setting Orphans Property

<!DOCTYPE html>
<html>
<head>
    <style>
        .paragraph {
            width: 300px;
            line-height: 1.5;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>
<body>
    <p id="myParagraph" class="paragraph">
        This is a sample paragraph that demonstrates the orphans property.
        When this content spans across page breaks during printing,
        the orphans property ensures minimum lines appear at the top.
        This helps maintain readable formatting in printed documents.
    </p>
    
    <button onclick="setOrphans()">Set Orphans to 3</button>
    <button onclick="getOrphans()">Get Orphans Value</button>
    
    <script>
        function setOrphans() {
            var element = document.getElementById("myParagraph");
            element.style.orphans = "3";
            console.log("Orphans set to 3 lines");
        }
        
        function getOrphans() {
            var element = document.getElementById("myParagraph");
            var orphansValue = element.style.orphans || "default (2)";
            console.log("Current orphans value: " + orphansValue);
        }
    </script>
</body>
</html>

Example: Different Orphans Values

<!DOCTYPE html>
<html>
<head>
    <style>
        .test-paragraph {
            width: 250px;
            margin: 10px 0;
            padding: 8px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div id="paragraph1" class="test-paragraph">
        Paragraph 1: Default orphans behavior for page breaks.
        This text will use browser default orphans setting.
    </div>
    
    <div id="paragraph2" class="test-paragraph">
        Paragraph 2: Custom orphans setting will be applied.
        This ensures better control over page break formatting.
    </div>
    
    <script>
        // Set different orphans values
        document.getElementById("paragraph1").style.orphans = "2";
        document.getElementById("paragraph2").style.orphans = "4";
        
        // Display current values
        console.log("Paragraph 1 orphans:", 
            document.getElementById("paragraph1").style.orphans);
        console.log("Paragraph 2 orphans:", 
            document.getElementById("paragraph2").style.orphans);
    </script>
</body>
</html>

Key Points

  • The orphans property only applies to paged media (print layouts)
  • It prevents awkward page breaks by ensuring minimum lines at page top
  • Works together with the widows property for complete page break control
  • Default value is typically 2 lines in most browsers

Conclusion

The orphans property in JavaScript helps control print layout by setting minimum lines at page tops. Use it alongside widows for professional document formatting when users print web content.

Updated on: 2026-03-15T23:18:59+05:30

193 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements