Column breaks
Limited availability
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.
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 Not supported
- Firefox for Android Not supported
- Safari Not supported
- Safari on iOS Not supported
Need this feature?
Leave a 👍 on the feedback issue
Don't forget to also leave a comment explaining your specific use case.
MDN documentation
Specifications
Web Platform Tests (WPT)
View the latest WPT test results for this featureDeveloper 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