{"id":2831,"date":"2019-12-10T15:05:17","date_gmt":"2019-12-10T15:05:17","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2831"},"modified":"2023-02-12T03:08:04","modified_gmt":"2023-02-12T03:08:04","slug":"css-tutorial-break-after","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-break-after\/","title":{"rendered":"CSS Tutorial &#8211; break-after"},"content":{"rendered":"<p>The CSS\u00a0<code>break-after<\/code>\u00a0property is neat in that it allows, forces, or prevents breaks in paged media, multi-column layouts, and regions. When applying the property to an element, what we\u2019re doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions.<\/p>\n<h2 id=\"syntax\">Syntax<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">break-after: auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region<\/pre>\n<ul class=\"is-style-almanac-list\">\n<li><strong>Initial:<\/strong>\u00a0<code>auto<\/code><\/li>\n<li><strong>Applies to:<\/strong>\u00a0block-level boxes, grid items, flex items, table row groups, table rows<\/li>\n<li><strong>Inherited:<\/strong>\u00a0no<\/li>\n<li><strong>Computed value:<\/strong>\u00a0as specified<\/li>\n<li><strong>Animation type:<\/strong>\u00a0discrete<\/li>\n<\/ul>\n<h3 id=\"values\"><a id=\"aa-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/#aa-values\" aria-hidden=\"true\"><\/a>Values<\/h3>\n<p>At the time of this writing, the following values are defined in the CSS Multi-column Layout Module Level 1 specification, which is in Editor Draft status. So, some of the following values are experimental and could change at some point.<\/p>\n<p>The big thing to know about\u00a0<code>break-after<\/code>\u00a0is that it is designed to work with paged media, multi-column layouts, and regions. That means we have three sets of possible values that can be used depending on the context.<\/p>\n<h3 id=\"generic-break-values\"><a id=\"aa-generic-break-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/#aa-generic-break-values\" aria-hidden=\"true\"><\/a>Generic break values<\/h3>\n<p>These values are generic in the sense that they can be used in all three contexts:<\/p>\n<ul>\n<li><strong><code>auto<\/code>:<\/strong>\u00a0Neither force nor forbid a break (page, column, or region) after the element.<\/li>\n<li><strong><code>avoid<\/code>:<\/strong>\u00a0Avoids a break (page, column, or region) after the element.<\/li>\n<li><strong><code>all<\/code>:<\/strong>\u00a0(Experimental) Forces a page break after the element. Breaking through all possible fragmentation contexts. So a break inside a multi-column container, which was inside a page container would force a column and page break.<\/li>\n<li><strong><code>always<\/code>:<\/strong>\u00a0(Experimental) Forces a page break after the element. This value is in the context of the immediately-containing fragmentation. If we are inside a multi-column container, like using the\u00a0<code>column<\/code>\u00a0property on the parent container, then it would force a column break. In paged media, it forces a page break.<\/li>\n<\/ul>\n<h4 id=\"paged-media-values\"><a id=\"aa-paged-media-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/#aa-paged-media-values\" aria-hidden=\"true\"><\/a>Paged Media values<\/h4>\n<ul>\n<li><strong><code>avoid-page<\/code>:<\/strong>\u00a0Avoids any page break after the element.<\/li>\n<li><strong><code>page<\/code>:<\/strong>\u00a0Forces a page break after the element.<\/li>\n<li><strong><code>left<\/code>:<\/strong>\u00a0Forces one or two page breaks after the element, so anything that makes it to the next page will be formatted to the left, that is it starts from the left page.<\/li>\n<li><strong><code>right<\/code>:<\/strong>\u00a0Forces one or two page breaks after the element, so anything that makes it to the next page will be formatted to the right, that is it starts from the right page.<\/li>\n<\/ul>\n<ul>\n<li><strong><code>recto<\/code>:<\/strong>\u00a0(Experimental) Force one or two page breaks after the element so that the next page is formatted as a recto page (i.e. a right page moving from left-to-right or a left page moving right-to-left).<\/li>\n<li><strong><code>verso<\/code>:<\/strong>\u00a0(Experimental) Force one or two page breaks after the element so that the next page is formatted as a verso page (i.e. a left page moving from left-to-right or a right page moving from right-to-left).<\/li>\n<\/ul>\n<h4 id=\"multicolumn-layout-values\"><a id=\"aa-multi-column-layout-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/#aa-multi-column-layout-values\" aria-hidden=\"true\"><\/a>Multi-column Layout values<\/h4>\n<ul>\n<li><strong><code>avoid-column<\/code>:<\/strong>\u00a0(Experimental) Avoid a column break after the element.<\/li>\n<li><strong><code>column<\/code>:<\/strong>\u00a0(Experimental) Always forces a column break after the element .<\/li>\n<\/ul>\n<h4 id=\"regions-values\"><a id=\"aa-regions-values\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/#aa-regions-values\" aria-hidden=\"true\"><\/a>Regions values<\/h4>\n<ul>\n<li><strong><code>avoid-region<\/code>:<\/strong>\u00a0Avoids a region break after the element.<\/li>\n<li><strong><code>region<\/code>:<\/strong>\u00a0Always force a region break after the element.<\/li>\n<\/ul>\n<h3 id=\"breakafter-replaces-pagebreakafter\"><a id=\"aa-break-after-replaces-page-break-after\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/#aa-break-after-replaces-page-break-after\" aria-hidden=\"true\"><\/a><code>break-after<\/code>\u00a0replaces\u00a0<code>page-break-after<\/code><\/h3>\n<p>If\u00a0<code>break-after<\/code>\u00a0looks somewhat familiar, that\u2019s because it takes the place of\u00a0<code>page-break-after<\/code>, one of three\u00a0page-break-related properties.<\/p>\n<p>What\u2019s the difference? Well,\u00a0<code>page-break-after<\/code>\u00a0was only for paged media.\u00a0<code>break-after<\/code>\u00a0is a lot more robust as far as where and how it can be used since, in addition to serving as an alias for\u00a0<code>page-break-after<\/code>, it is also contained in the CSS\u00a0<a href=\"https:\/\/drafts.csswg.org\/css-break\/#break-between\" rel=\"noopener\">Fragmentation<\/a>,\u00a0<a href=\"https:\/\/drafts.csswg.org\/css-multi-column\/#break-before-break-after-break-inside\" rel=\"noopener\">Multi-column Layout<\/a>\u00a0and\u00a0<a href=\"https:\/\/drafts.csswg.org\/css-regions\/#region-flow-break\" rel=\"noopener\">Regions<\/a>\u00a0specifications.<\/p>\n<p>Here\u2019s a table of the\u00a0<code>break-after<\/code>\u00a0values that correspond with the legacy\u00a0<code>page-break-after<\/code>\u00a0property values if you\u2019re using it as an alias:<\/p>\n<figure class=\"wp-block-table\">\n<table>\n<tbody>\n<tr>\n<th><code>break-after<\/code><\/th>\n<th><code>page-break-after<\/code><\/th>\n<\/tr>\n<tr>\n<td><code>auto<\/code><\/td>\n<td><code>auto<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>right<\/code><\/td>\n<td><code>right<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>avoid<\/code><\/td>\n<td><code>avoid<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>left<\/code><\/td>\n<td><code>left<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>page<\/code><\/td>\n<td><code>always<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n<p>Even though\u00a0<code>break-after<\/code>\u00a0replaces\u00a0<code>page-break-after<\/code>, it\u2019s still a good idea to set\u00a0<code>page-break-after<\/code>\u00a0as a fallback for browsers that might lack support for\u00a0<code>break-after<\/code>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.element {\r\n  page-break-after: always; \/* fallback *\/\r\n  break-after: page;\r\n}<\/pre>\n<h2 id=\"demos\">Demos<\/h2>\n<p>Let\u2019s take a look at a couple of demos to better understand how\u00a0<code>break-after<\/code>\u00a0works.<\/p>\n<h3 id=\"paged-media-alias\">Paged Media alias<\/h3>\n<p>In this example, the\u00a0<code>avoid<\/code>\u00a0value is used to prevent any page, column, or region breaks in the layout so that when printing the page \u2014 yes, with a real printer that uses paper \u2014 there are no breaks between the columns. Instead, what we get is a nice single-column layout that\u2019s better suited for printing:<br \/>\n<iframe style=\"width: 100%;\" title=\"CSS Tutorial - break-after\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/GRxBYYQ?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/GRxBYYQ\"><br \/>\nCSS Tutorial &#8211; break-after<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h3>HTML<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;main&gt;\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n  &lt;article&gt;\r\n    &lt;h2&gt;Heading&lt;\/h2&gt;\r\n    &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit.Aliquid a corporis nostrum velit repudiandae fuga commodi aut delectus numquam. Debitis quod repellendus reprehenderit obcaecati asperiores&lt;\/p&gt;\r\n  &lt;\/article&gt;\r\n\r\n&lt;\/main&gt;<\/pre>\n<h3>CSS<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">main {\r\n  column-width: 200px;\r\n  column-gap: 50px;\r\n  padding: 1.5rem;\r\n}\r\n\r\narticle {\r\n  border: 3px dotted #ff7a18;\r\n  break-after: avoid;\r\n  margin-block-end: 50px;\r\n  padding: 1rem;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The CSS\u00a0break-after\u00a0property is neat in that it allows, forces, or prevents breaks <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-break-after\/\" title=\"CSS Tutorial &#8211; break-after\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3248,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[210,207,200,197,211],"newstopic":[],"class_list":{"0":"post-2831","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-break-after","10":"tag-css-calender","11":"tag-css-code","12":"tag-css-tutorial","13":"tag-page-break-after"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2831","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2831"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2831\/revisions"}],"predecessor-version":[{"id":2832,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2831\/revisions\/2832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3248"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2831"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}