- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - orphans Property
In CSS, the orphans property is used to control the minimum number of lines in a block of text that must be displayed at the bottom of a page, region, or column before a page or column break can occur. It is typically used in the context of controlling page breaks and pagination for printed documents or multi-column layouts.
If the number of lines at the bottom of the block is less than the value of the orphans property, the block is moved to the next page or column to ensure that the specified number of lines is displayed together.
As per typography, orphan is the first line of a paragraph that appears at the bottom of the page, alone; when the paragraph is continued on the next new page.
Possible Value
<integer>: Specifies the number of lines that can be shown at the bottom of a fragment before the fragmentation break. It should have a positive value only. Default value is 2.
Applies to
All the block-level elements.
DOM Syntax
object.style.orphans = "3"
This property is often used in combination with the widows property, which controls the minimum number of lines that must be displayed at the top of a page or column. Together, orphans and widows help ensure that a specified amount of content stays together during pagination, improving the readability and flow of printed documents or multi-column layouts.
orphans is not supported on Firfox browser.
CSS orphans - Integer Value
Here is an example showing the usage of orphans CSS property, where orphans value is passed through a class declaration (.orphan-demo):
<html> <head> <style> div.orphan-demo { background-color: tomato; height: 170px; columns: 3; orphans: 3; padding: 5px; } p { background-color: lightyellow; } p:first-child { margin-top: 0; } </style> </head> <body> <h1>Orphans property</h1> <div class="orphan-demo"> <p>Paragraph one that shows some text having just one line.</p> <p> Paragraph two in the same div "orphans-demo", with some styling applied. Testing for the working of orphans property of CSS. There are three lines in this paragraph. Paragraph two having few more lines for some extra content for the testing purpose. </p> <p> Paragraph three for some extra text for the testing purpose. Second line in the third paragraph to test the orphans property. </p> </div> </body> </html>
In the above example:
a class is defined on div element (orphan-demo), with CSS styling such as background-color, height, padding, column and orphans.
the div is divided into three columns and orphans value set to 3.
three p elements are added under the parent div.
the output is based on the value of orphans value (in this case 3), and as the fragment breaks and paragraph continues in next block accordingly.
CSS orphans - Inherit Value
Here is an example showing the usage of orphans CSS property, where orphans value is passed as inherit and through an id declaration:
<html> <head> <style> #orphan-demo { columns: 3; column-gap: 5em; orphans: inherit; } div { background-color: green; padding: 5px; } p { background-color: antiquewhite; } span { font-style: italic; color: green; } </style> </head> <body> <div id="orphan-demo"> <p> Paragraph one that shows some text having just one line. </p> <p> <span> Paragraph two in the same div, with some styling applied. Testing for the working of orphans property of CSS. There are three lines in this paragraph. Paragraph two having few more lines for some extra content for the testing purpose. The orphans CSS property is used to set the minimum number of line on the old page. </span> </p> <p> Paragraph three for some extra text for the testing purpose. Second line in the third paragraph. Testing for the orphans property which takes up an integer value or initial / inherit values. </p> <p> Paragraph four in the third column of the page. Number of lines in this paragaraph is two. Testing for the orphans CSS property which takes up an integer value or initial / inherit values. </p> </div> </body> </html>
An id is defined and applied on div element (#orphan-demo), with CSS styling such as column, column-gap, and orphans.
The div is divided into three columns and orphans value set to inherit, which inherits the default value of the parent.
Four p elements are added under the parent div.
the output is based on the value of orphans value (in this case inherit), and as the fragment breaks and paragraph continues in next block accordingly.
CSS orphans - Media Print
Here is an example showing the usage of orphans CSS property, where the orphans value is set as an <integer> through a media query (@media print):
<html> <head> <style> @media print { p { orphans: 3; columns: 2; column-gap: 5em; } button { display: none; } } </style> </head> <body> <article> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam velit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam velit. </p> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam velit. </p> </article> <button>Print</button> <script> const button = document.querySelector("button"); button.addEventListener("click", () => { window.print(); }); </script> </body> </html>
A media query is defined and applied on p element, in print mode, with CSS styling such as column, column-gap, and orphans.
There is a button "Print" on click of which the orphans value is applied on the content.
The old section shows first three lines of the last paragraph.
To Continue Learning Please Login
Login with Google