Column breaks
In columnar layouts (created by the columns or column-count CSS properties), the break-after, break-before, break-inside properties control where columns start or end.
Status
Limited availability
MDN documentation
Specifications
Browser support
- Chrome 102 Released on 2022-05-24
- Chrome Android 102 Released on 2022-05-24
- Edge 102 Released on 2022-05-31
- Firefox ❌
- Firefox for Android ❌
- Safari ❌
- Safari on iOS ❌
Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper votes
Do you need this feature?
Let us know by leaving a 👍 reaction on the feedback issue. Don't forget to also leave a comment explaining your specific use case.
Developer use cases
-
My application is about writing books and publish them as e-pub. Part of the application is about configuring the look and feel of the e-pub in real time and instantly show the results in a preview pane (size 600 x 800 pixels). I delegate all the pixel calculations for the entire book preview to the browser, using a column layout with a single column and use `break-after: column` to simulate a page break (for those browsers that support it). That works excellent.
My application is about writing books and publish them as e-pub. Part of the application is about configuring the look and feel of the e-pub in real time and instantly show the results in a preview pane (size 600 x 800 pixels). I delegate all the pixel calculations for the entire book preview to the browser, using a column layout with a single column and use `break-after: column` to simulate a page break (for those browsers that support it). That works excellent. [see original comment]
View as JSON | Edit this feature | Report an issue | Web-features entry: source, dist