BlogsDope image BlogsDope

CSS orphans

Jan. 21, 2018 HTML CSS 479

The orphans property specifies the minimum number of lines of an element that are displayed at the bottom of the first page when the element's content cannot fit in the first page. This property only affects block-level elements. This is even applicable for columns, in addition to pages.

Consider a case where you have a long paragraph whose content is not able to fit in one page and so some of its content gets displayed on the first page and the rest on the second page. If just one line of the paragraph is visible on the first page, then it will not have a good visual impact on users. This left out line is called an orphan. In order to display more number of lines (orphans) of the paragraph on the old page, you need to give that number as value to the orphans property.

CSS

orphans: value;

Before moving to its example, have a look at the values that this property can take.

Values

<integer> : This number specifies the number of lines (orphans) that you want to be displayed on the old page. This value must be a positive integer.

initial : This is the default value which is 2.

inherit : The element inherits value from its parent element.

unset : This sets the inherited value if the element inherits from its parent, otherwise it sets its initial value.

Example

Look at the following example in which changing the number of orphans changed the number of lines getting displayed in an older column.

HTML

<span>Without giving orphans value</span>
<div id="div1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Praesent placerat, elit vel viverra semper, est dolor rutrum ligula, nec convallis felis orci eget libero.</p>
  <p>Vivamus porttitor metus vitae ligula dapibus vehicula quis sit amet turpis. Integer ex mauris, laoreet a laoreet ut, tempus eget tortor.</p>
</div>

<span>Giving orphans: 5</span>
<div id="div2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Praesent placerat, elit vel viverra semper, est dolor rutrum ligula, nec convallis felis orci eget libero.</p>
  <p>Vivamus porttitor metus vitae ligula dapibus vehicula quis sit amet turpis. Integer ex mauris, laoreet a laoreet ut, tempus eget tortor.</p>
</div>

CSS

p {
  background-color: #F8CDBE;
}

/* Without giving orphans property */
#div1 {
  margin: 10px 0;
  background-color: #42526C;
  padding: 10px 10px;
  columns: 3;
  width:500px;
  height: 90px;
}

/* Giving orphans property */
#div2 {
  margin: 10px 0;
  background-color: #42526C;
  padding: 10px 10px;
  columns: 3;
  orphans: 5;
  width:500px;
  height: 90px;
}

See the Pen CSS Orphans Property by Aakhya Singh (@aakhya) on CodePen.

In the above example, the content of the third paragraph of both the div got splitted into two parts. The first part (orphans) got displayed in the older column within the div and the other part got displayed in a new column. For the first div, the number of lines inside the div (orphans) are 4. On giving orphans: 5 to the second div, the number of lines of its third paragraph inside the div (orphans) became 5.

The orphans property does not affect non-paged media. There is a similar property widows which specifies the minimum number of lines which are displayed at the top of the new page when the content of an element splits and the rest of the content gets displayed on a new page.

Browser Support

This property is not supported by Firefox and some older Webkit-based browsers.


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).