Break Inside

vel-src: layout.css

Utilities for controlling how a column or page should break within an element.

Class	Properties
vel-break-inside-auto	break-inside: auto
vel-break-inside-avoid	break-inside: avoid
vel-break-inside-avoid-page	break-inside: avoid-page
vel-break-inside-avoid-column	break-inside: avoid-column

Examples

Break inside variants

vel-break-inside-auto

Normal break behavior inside element

vel-break-inside-avoid

Prevents any break inside element

vel-break-inside-avoid-column

Prevents column break inside element

vel-break-inside-avoid-page

Prevents page break inside element

example.html

<div class="vel-grid vel-grid-cols-2 vel-gap-4">
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-inside-auto</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Normal break behavior inside element</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-inside-avoid</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Prevents any break inside element</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-inside-avoid-column</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Prevents column break inside element</p>
  </div>
  <div style="background:#1a2236;border:1px solid #1e2d45;padding:12px;border-radius:6px">
    <code style="color:#a87fff;font-size:12px">vel-break-inside-avoid-page</code>
    <p style="color:#64748b;font-size:12px;margin-top:4px">Prevents page break inside element</p>
  </div>
</div>