CSS

CSS

🎯 CSS break-after Property

The break-after CSS property is used in multi-column layouts, paged media, and text flow control to define whether a break should occur after an element.

It controls whether the next content continues in the same column or moves to a new one after the current element ends.

πŸ”Ή Where Is break-after Used?

  • Common Use Cases

  • πŸ“Œ Multi-column blog layouts
  • πŸ“Œ Newspaper and magazine-style designs
  • πŸ“Œ Print (paged media) layouts
  • πŸ“Œ Structured article formatting

πŸ”Ή break-after Values

  • auto β†’ Browser decides where to break
  • column β†’ Forces a new column after the element
  • initial β†’ Resets to default (auto)

🧩 Basic Example

CSS

.columns {
    column-count: 3;
}

p {
    break-after: column;
}

In this example, the content is divided into 3 columns and every paragraph ends with a forced column break.

  • 🧠 Summary

  • break-after defines whether a break occurs after an element.
  • It is mainly used in multi-column and print-style layouts.
  • column forces a new column after the element ends.
  • auto lets the browser decide automatically.
CSS break-before
CSS flex-direction