Status for tailwindcss.com Markdown Conversion

# `break-inside` Utility Documentation ## Overview The `break-inside` utilities are used to control how content within an element should break when spanning across columns or pages. This is particularly useful for managing layout flows in multi-column layouts, paged media, or when dealing with content that should be kept intact during a break. --- ## Available Classes and Styles | Class | CSS Property | |----------------------------------|--------------------------------------| | `break-inside-auto` | `break-inside: auto;` | | `break-inside-avoid` | `break-inside: avoid;` | | `break-inside-avoid-page` | `break-inside: avoid-page;` | | `break-inside-avoid-column` | `break-inside: avoid-column;` | --- ## Example Usage ### Basic Example To control break behavior within a layout: ```html <div class="columns-2"> <p>Well, let me tell you something, ...</p> <p class="break-inside-avoid-column">Sure, go ahead, laugh...</p> <p>Maybe we can live without...</p> <p>Look. If you think this is...</p> </div> ``` In this example, the paragraph with `break-inside-avoid-column` will avoid breaking inside, ensuring it stays intact during column or page breaks. ### Responsive Design Apply different break strategies based on screen size by prefixing the utility with breakpoint variants: ```html <div class="break-inside-avoid-column md:break-inside-auto"> <!-- Content that on small screens avoids break, but on medium and larger screens defaults to auto --> </div> ``` --- ## Quick Reference - Use **`break-inside-avoid`** to prevent breaking inside an element. - Use **`break-inside-avoid-page`** to avoid breaking across pages. - Use **`break-inside-avoid-column`** to prevent breaking inside columns. - Use **`break-inside-auto`** to allow breaking normally. --- ## Examples and Further Learning ### Basic Example ```html <div class="columns-2"> <p>Well, let me tell you something, ...</p> <p class="break-inside-avoid-column">Sure, go ahead, laugh...</p> <p>Maybe we can live without...</p> <p>Look. If you think this is...</p> </div> ``` ### Responsive Design ```html <div class="break-inside-avoid-column md:break-inside-auto"> <!-- Content with break behavior adjusted at different screen sizes --> </div> ``` Learn more about using variants in the [Variants Documentation](https://tailwindcss.com/docs/hover-focus-and-other-states). --- ## Additional Resources - [Tailwind CSS Documentation](https://tailwindcss.com/docs) - [Tailwind Playground](https://play.tailwindcss.com/) - [Tailwind Blog](https://blog.tailwindcss.com/) - [Tailwind Showcase](https://tailwindcss.com/showcase) - [Community & Support](https://github.com/tailwindlabs/tailwindcss) --- **Note:** This page only documents the `break-inside` utilities. For other layout, styling, or utility classes, refer to the full Tailwind CSS documentation.