CSS Orphans

The orphans property in CSS is used in paged media (like print layouts) or multi-column layouts to control the minimum number of lines of a paragraph that must appear at the bottom of a page or column. It prevents single lines (orphans) of a paragraph from being separated from the rest of the text, ensuring better readability and a visually pleasing layout.

Syntax

selector {
  orphans: value;
}

Try It Now

  • value: An integer specifying the minimum number of lines that must remain at the bottom of a page or column.

How It Works

  • If the number of lines left at the bottom of a page or column is fewer than the value specified in the orphans property, the entire paragraph will move to the next page or column.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Orphans Example</title>
  <style>
    p {
      orphans: 3; /* At least 3 lines must stay at the bottom of a page/column */
      margin: 10px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum sapien nec nulla dapibus, non bibendum ligula aliquet. Sed at nunc euismod, ultricies eros eget, suscipit velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, arcu nec ultrices luctus, lectus magna malesuada justo, non dictum nisl odio at velit.
  </p>
</body>
</html>

Try It Now

Use Cases

  1. Paged Media:
    • When printing documents, the orphans property ensures that a single line of a paragraph is not left at the bottom of a page.
  2. Multi-Column Layouts:
    • In multi-column layouts, it prevents a single line from appearing at the bottom of a column.

Browser Support

The orphans property is supported in most modern browsers but is primarily effective in contexts where paged media or multi-column layouts are used.

Browser Support
Chrome Yes (Partial for print)
Firefox Yes (Partial for print)
Edge Yes (Partial for print)
Safari Yes (Partial for print)
Internet Explorer No

Related Properties

  1. widows:
    • Controls the minimum number of lines of a paragraph that must appear at the top of a page or column.
    • Example: widows: 2;
  2. break-inside:
    • Prevents breaks within an element.
    • Example: break-inside: avoid;

Best Practices

  • Use the orphans property in combination with widows to ensure consistent and professional text layouts.
  • Apply these properties in print stylesheets or layouts where readability is crucial.

Example with widows and orphans

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Orphans and Widows</title>
  <style>
    p {
      orphans: 2; /* At least 2 lines at the bottom of a page/column */
      widows: 2;  /* At least 2 lines at the top of a page/column */
      margin: 10px;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <p>
    This is a long paragraph that demonstrates the use of the `orphans` and `widows` properties in CSS. These properties are especially useful in print media or multi-column layouts to ensure that the text is visually appealing and readable. By specifying the minimum number of lines that must appear at the top or bottom of a page or column, you can prevent awkward breaks in the text and maintain a professional appearance.
  </p>
</body>
</html>

Try It Now

By using orphans and related properties, you can ensure your layouts look polished and professional in both print and multi-column designs.