{"id":180050,"date":"2014-08-21T10:58:19","date_gmt":"2014-08-21T17:58:19","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=180050"},"modified":"2022-06-13T08:14:23","modified_gmt":"2022-06-13T15:14:23","slug":"break-inside","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-inside\/","title":{"rendered":"break-inside"},"content":{"rendered":"\n<p>Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2014\/08\/column-break-inside.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\"\/><\/figure>\n\n\n\n<p>Fortunately, you can tell the browser to keep specific elements together with <code>break-inside<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">li {\n-webkit-column-break-inside: avoid;\n          page-break-inside: avoid;\n               break-inside: avoid;\n}<\/code><\/pre>\n\n\n\n<p>At the moment, the property universally accepts the values <code>auto<\/code> and <code>avoid<\/code>.<\/p>\n\n\n\n<p>Use <code>avoid<\/code> on an element within a multi-column layout to keep the property from breaking apart.<\/p>\n\n\n\n<p>Take one extra look at the syntax for this property as there\u2019s some variation among the browsers.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">-webkit-column-break-inside: avoid; \/* Chrome, Safari, Opera *\/\n          page-break-inside: avoid; \/* Firefox *\/\n               break-inside: avoid; \/* IE 10+ *\/<\/code><\/pre>\n\n\n\n<p>The property takes after the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/page-break\/\">page break<\/a> properties and shares the same values. For now, <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=549114\" rel=\"noopener\">Firefox uses <code>page-break-inside<\/code><\/a>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_40cb167e16dc53bc78f1ddad8db6c82f\/\" src=\"\/\/codepen.io\/anon\/embed\/40cb167e16dc53bc78f1ddad8db6c82f\/?height=450&amp;theme-id=1&amp;slug-hash=40cb167e16dc53bc78f1ddad8db6c82f\/&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 40cb167e16dc53bc78f1ddad8db6c82f\/\" title=\"CodePen Embed 40cb167e16dc53bc78f1ddad8db6c82f\/\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"additional-resources\">Additional resources<\/h3>\n\n\n<ul><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/break-inside\" rel=\"noopener\">MDN Docs<\/a><\/li><li><a href=\"http:\/\/www.w3.org\/TR\/css3-multicol\/#break-inside\" rel=\"noopener\">CSS3 Spec<\/a><\/li><li><a href=\"http:\/\/caniuse.com\/#feat=multicolumn\" rel=\"noopener\">Can I Use<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<p><strong>Page break properties:<\/strong><\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=css-page-break\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">128<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">TP<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">17.5<\/span><\/td><\/tr><\/table><\/div><\/div>\n\n\n\n<p><strong>Multi-column layout support:<\/strong><\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=multicolumn\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">128<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">10<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">10.0-10.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Columns do a great job of flowing and balancing content. Unfortunately, not all elements flow gracefully. Sometimes elements get stuck between columns. Fortunately, you can tell the browser to keep specific elements together with break-inside. At the moment, the property universally accepts the values auto and avoid. Use avoid on an element within a multi-column [&hellip;]<\/p>\n","protected":false},"author":200919,"featured_media":0,"parent":13913,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1592,1591],"acf":[],"jetpack-related-posts":[{"id":178809,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/columns\/","url_meta":{"origin":180050,"position":0},"title":"columns","date":"August 14, 2014","format":false,"excerpt":"With just a few CSS rules, you can create a print-inspired layout that has the flexibility of the web. It\u2019s like taking a newspaper, but as the paper gets smaller, the columns will adjust and balance automatically allowing the content to flow naturally. .intro { columns: 300px 2; } The\u2026","rel":"","context":"With 21 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":366362,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-before\/","url_meta":{"origin":180050,"position":1},"title":"break-before","date":"June 13, 2022","format":false,"excerpt":"The CSS break-before property 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're doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions. Note: break-before is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366427,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/break-after\/","url_meta":{"origin":180050,"position":2},"title":"break-after","date":"June 13, 2022","format":false,"excerpt":"The CSS break-after property 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're doing is providing an instruction for whether to break or prevent breaks between pages, columns, and regions. Note: break-after is\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":250100,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/overflow-wrap\/","url_meta":{"origin":180050,"position":3},"title":"overflow-wrap","date":"January 17, 2017","format":false,"excerpt":"The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow. .example { overflow-wrap: break-word;\u2026","rel":"","context":"In \"overflow-wrap\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14089,"url":"https:\/\/css-tricks.com\/almanac\/properties\/p\/page-break\/","url_meta":{"origin":180050,"position":4},"title":"page-break","date":"September 5, 2011","format":false,"excerpt":"There isn't an actual page-break property in CSS. It is actually a set of 3 properties: page-break-before, page-break-after and page-break-inside. These properties help define how the document is supposed to behave when printed. For example, to make a printed document more book-like. Properties page-break-before The page-break-before property adds a page-break\u2026","rel":"","context":"With 36 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":203655,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-decoration-break\/","url_meta":{"origin":180050,"position":5},"title":"box-decoration-break","date":"June 15, 2015","format":false,"excerpt":"The box-decoration-break property lets you control how box decorations are drawn across the fragments of a \"broken\" element. An element can break into fragments at the end of a line, over columns, or at page breaks. .module { box-decoration-break: clone; } The box decoration properties controlled by box-decoration-break are: background\u2026","rel":"","context":"In \"box-decoration-break\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/180050"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/200919"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=180050"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/180050\/revisions"}],"predecessor-version":[{"id":366378,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/180050\/revisions\/366378"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=180050"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=180050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}