Break-inside controls permitted fragmentation within an element when content is distributed across pages or columns. Avoid requests are preferences; a unit larger than the available page may still have to break.
Make this comfortable
CSS break-inside: keep small report units together in print
When to use it
A printable incident report groups a timestamp, source, and short note in one evidence card. Asking the print formatter to avoid a break inside that card can keep its label beside the data. Keep the card reasonably small and let long narratives flow as ordinary paragraphs; one giant unbreakable report section can leave empty pages or overflow. The sample scopes the rule to each card under print media and keeps screen layout untouched. Test the first card near a page boundary, a long note, and a report with an image. Browser print engines can paginate differently, so verify the output rather than assuming a single screenshot proves every paper size.
@media print { .evidence-card { break-inside: avoid; margin-block-end: .75rem; } }Cost and verification
Print pagination takes layout work, but the main cost here is wasted page space when too many large blocks refuse to split. A browser may override an impossible avoidance request. Do not hide overflowing text or shrink it until unreadable to force a single-page card. If the report is a formal artifact, inspect A4 and Letter, headers, footers, and grayscale output. In multi-column reading views the same property has a related fragmentation role, but its results still depend on content height and available column space.
Common Mistakes
- Do not treat avoid as a guarantee for an oversized block.
- Do not apply it to an entire long report.
- Do not validate only the on-screen layout when the rule targets print.
Connected lessons
css
reference
web