Tailwind CSS - Break Inside

Tailwind CSS: Break Inside

The break-inside utilities control how content should break within a multi-column or multi-page element. Their primary use case is to prevent awkward breaks that can make content difficult to read, especially in multi-column text layouts or when printing a webpage.

Break Inside Utilities

These utilities give you precise control over fragmentation in your layout.

Class	CSS Properties	Description
break-inside-auto	break-inside: auto;	Default behavior. The browser will automatically decide where to break content.
break-inside-avoid	break-inside: avoid;	Avoids breaking inside the element for both columns and pages.
break-inside-avoid-page	break-inside: avoid-page;	Specifically avoids a page break inside the element (for print).
break-inside-avoid-column	break-inside: avoid-column;	Specifically avoids a column break inside the element.

Practical Example: A Multi-Column Article

Imagine an online magazine layout. You want text to flow across columns, but you don’t want an image caption or a blockquote to be split in two. This is the perfect scenario for break-inside-avoid-column.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Break Inside Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white p-8 font-serif text-slate-700">

  <h1 class="text-4xl font-bold text-slate-900 mb-4">The Art of Layout</h1>

  <!-- On medium screens and up, display as a 2-column layout with a gap -->
  <div class="md:columns-2 md:gap-12">
    <p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>

    <p class="mb-4">Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue.</p>

    <!-- This figure block will not be split across columns -->
    <figure class="mb-4 p-4 bg-slate-100 rounded-md **break-inside-avoid-column**">
      <blockquote class="border-l-4 border-slate-400 pl-4 italic">
        "The ability to prevent awkward breaks is crucial for readability. This blockquote will always stay together."
      </blockquote>
      <figcaption class="text-right text-sm mt-2 text-slate-500">— A Wise Designer</figcaption>
    </figure>

    <p class="mb-4">Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales.</p>

    <p class="mb-4">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam.           </p>

  </div>
</body>
</html>

Modern Context and Best Practices

• Primary Use Case: The columns-* and break-inside-* utilities are most effective for long-form, text-heavy content like articles, documentation, or reports.
• Flexbox/Grid vs. Columns: For most component and page layouts, modern CSS Flexbox (flex) and Grid (grid) are more powerful and flexible than the multi-column layout module. Use columns for their specific text-flow capabilities.
• Print Stylesheets: break-inside-avoid-page is invaluable when creating print-friendly versions of your web pages. You can use it to keep important sections, like a chart and its title, on the same page when printed. Use the print: prefix: print:break-inside-avoid-page.