https://www.tailwindcss.cn/_next/static/chunks/pages/docs/break-inside-d8f2795881af90dd.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[9876],{91003:function(n,a,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/docs/break-inside",function(){return s(16903)}])},16903:function(n,a,s){"use strict";s.r(a),s.d(a,{default:function(){return h}});var e=s(85893),t=s(11151),o=s(72788),l=s(25324),i=s(29437),p=s(86621);let c=o.L,r=l.X_;function u(n){let a=Object.assign({p:"p",code:"code",pre:"pre",hr:"hr"},(0,t.ah)(),n.components),{Heading:s}=a;return s||function(n,a){throw Error("Expected "+(a?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}("Heading",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(s,{level:2,id:"basic-usage",nextElement:{type:"heading",depth:3},children:"Basic usage"}),"\n",(0,e.jsx)(s,{level:3,id:"setting-the-break-inside-behavior",children:"Setting the break-inside behavior"}),"\n",(0,e.jsxs)(a.p,{children:["Use the ",(0,e.jsx)(a.code,{children:"break-inside-*"})," utilities to control how a column or page break should behave within an element. For example, use the ",(0,e.jsx)(a.code,{children:"break-inside-avoid-column"})," utility to avoid a column break within an element."]}),"\n",(0,e.jsx)(a.pre,{className:"language-html",dangerouslySetInnerHTML:{__html:'<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>columns-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Well, let me tell you something, ...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="code-highlight bg-code-highlight">break-inside-avoid-column</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Sure, go ahead, laugh...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Maybe we can live without...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>Look. If you think this is...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span></code>'}}),"\n",(0,e.jsx)(a.hr,{}),"\n",(0,e.jsx)(s,{ignore:!0,level:2,id:"applying-conditionally",nextElement:{type:"heading",depth:3},children:"Applying conditionally"}),"\n",(0,e.jsx)(s,{ignore:!0,level:3,id:"hover-focus-and-other-states",children:"Hover, focus, and other states"}),"\n",(0,e.jsx)(p.k,{featuredClass:"break-inside-avoid-column"}),"\n",(0,e.jsx)(s,{ignore:!0,level:3,id:"breakpoints-and-media-queries",children:"Breakpoints and media queries"}),"\n",(0,e.jsx)(i.p,{featuredClass:"break-inside-avoid-column"})]})}function d(n={}){return(0,e.jsx)(r,Object.assign({},n,{children:(0,e.jsx)(u,n)}))}var h=d;d.layoutProps={Layout:c,classes:{utilities:{".break-inside-auto":{"break-inside":"auto"},".break-inside-avoid":{"break-inside":"avoid"}

1,".break-inside-avoid-page":{"break-inside":"avoid-page"},".break-inside-avoid-column":{"break-inside":"avoid-column"}}},meta:{title:"Break Inside",description:"Utilities for controlling how a column or page should break within an element."},slug:"break-inside",tableOfContents:[{title:"Basic usage",slug:"basic-usage",children:[{title:"Setting the break-inside behavior",slug:"setting-the-break-inside-behavior",children:[]}]},{title:"Applying conditionally",slug:"applying-conditionally",children:[{title:"Hover, focus, and other states",slug:"hover-focus-and-other-states",children:[]},{title:"Breakpoints and media queries",slug:"breakpoints-and-media-queries",children:[]}]}]}},29437:function(n,a,s){"use strict";s.d(a,{p:function(){return t}});var e=s(85893);function t({defaultClass:n,featuredClass:a,element:s="div",children:t}){return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("p",{children:["You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use ",(0,e.jsxs)("code",{children:["md:",a]})," to apply the ",(0,e.jsx)("code",{children:a})," utility at only medium screen sizes and above."]}),t||(0,e.jsx)("pre",{className:"language-html",children:(0,e.jsx)("code",{className:"language-html",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>{element}</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{defaultClass} <span class="code-highlight bg-code-highlight">md:{featuredClass}</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token comment">&lt;!-- ... --></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>{element}</span><span class="token punctuation">></span></span>\n'.replace(/{element}/g,s).replace("{defaultClass} ",n?`${n} `:"").replace("{featuredClass}",a)}})}),(0,e.jsxs)("p",{children:["To learn more, check out the documentation on"," ",(0,e.jsx)("a",{href:"/docs/responsive-design",children:"Responsive Design"}),","," ",(0,e.jsx)("a",{href:"/docs/dark-mode",children:"Dark Mode"})," and"," ",(0,e.jsx)("a",{href:"/docs/hover-focus-and-other-states#media-and-feature-queries",children:"other media query modifiers"}),"."]})]})}},86621:function(n,a,s){"use strict";s.d(a,{k:function(){return t}});var e=s(85893);function t({property:n,utility:a,variant:s="hover",defaultClass:t,featuredClass:o,element:l="div",children:i}){return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)("p",{children:["Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use"," ",(0,e.jsxs)("code",{children:[s,":",o]})," ","to only apply the ",(0,e.jsx)("code",{children:o})," utility on ",s,"."]}),i||(0,e.jsx)("pre",{className:"language-html",children:(0,e.jsx)("code",{className:"language-html",dangerouslySetInnerHTML:{__html:'<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>{element}</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{defaultClass} <span class="code-highlight bg-code-highlight">{variant}:{featuredClass}</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n  <span class="token comment">&lt;!-- ... --></span>\n<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>{element}</span><span class="token punctuation">></span></span>\n'.replace(/{element}/g,l).replace("{defaultClass} ",t?`${t} `:"").replace("{variant}",s).replace("{featuredClass}",o)}})}),(0,e.jsxs)("p",{children:["For a complete list of all available state modifiers, check out the"," ",(0,e.jsx)("a",{href:"/docs/hover-focus-and-other-states",children:"Hover, Focus, & Other States"})," documentation."]})]})}},72788:function(n,a,s){"use strict";s.d(a,{L:function(){return i}});var e=s(85893),t=s(97903),o=s(77929),l=s(87308);function i(n){return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(o.Dx,{children:n.layoutProps.meta.metaTitle||n.layoutProps.meta.title}),(0,e.jsx)(t.C,{nav:l.u,...n})]})}i.nav=l.u},11151:function(n,a,s){"use strict";s.d(a,{Zo:function(){return i},ah:function(){return o}});var e=s(67294);let t=e.createContext({});function o(n){let a=e.useContext(t);return e.useMemo(()=>"function"==typeof n?n(a):{...a,...n},[a,n])}let l={};function i({components:n,children:a,disableParentContext:s}){let i;return i=s?"function"==typeof n?n({}):n||l:o(n),e.createElement(t.Provider,{value:i},a)}}},function(n){n.O(0,[3430,4166,9495,224,7308,9774,2888,179],function(){return n(n.s=91003)}),_N_E=n.O()}]);