Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set the minimum number of lines for an element that must be left at the bottom of a page when a page break occurs inside an element with JavaScript?
The orphans property in CSS controls the minimum number of lines that must remain at the bottom of a page when a page break occurs inside an element. In JavaScript, you can manipulate this property through the style object.
Syntax
To get the orphans property:
var result = element.style.orphans;
To set the orphans property:
element.style.orphans = 'number|initial|inherit';
Property Values
- number ? Specify the minimum number of visible lines that must remain at the bottom
- initial ? Set property to its default value
- inherit ? Inherits property from the parent element
Example
<!DOCTYPE html>
<html>
<head>
<style>
.content {
page-break-inside: auto;
line-height: 1.5;
}
</style>
</head>
<body>
<div id="myElement" class="content">
<p>This is a long paragraph that might break across pages. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<button onclick="setOrphans()">Set Orphans to 3</button>
<button onclick="getOrphans()">Get Orphans Value</button>
<script>
function setOrphans() {
var element = document.getElementById("myElement");
element.style.orphans = "3";
console.log("Orphans set to: " + element.style.orphans);
}
function getOrphans() {
var element = document.getElementById("myElement");
var orphansValue = element.style.orphans || "default";
console.log("Current orphans value: " + orphansValue);
}
</script>
</body>
</html>
Key Points
- The
orphansproperty only applies to block-level elements - It works in conjunction with print media or paged media contexts
- The default value is typically 2 lines
- This property helps prevent awkward page breaks that leave too few lines at the bottom
Browser Compatibility
The orphans property has limited browser support and primarily works in print contexts. It's most effective when styling content for printing rather than screen display.
Conclusion
The JavaScript orphans property allows you to control page break behavior by setting the minimum number of lines required at the bottom of a page. This is particularly useful for print stylesheets and ensuring proper document formatting.
Updated on: 2026-03-15T23:18:59+05:30
180 Views
Advertisements