A free text notes block that does not overflow or leave a gap

Why this block is harder than it looks

This is the only block in a generated document whose content is entirely outside your control, and it fails in both directions. Empty, it leaves a labelled hole that reads as missing data. Very long, it pushes everything after it onto pages nobody planned for, and if it was given a fixed height it is silently truncated instead, which on a document with legal weight is the worse of the two failures. The content also arrives as plain text with the author's own line breaks in it, and preserving those without also preserving every stray space is a specific problem with a specific answer.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Omit the whole block, label included, when there is no content. A heading with nothing under it is worse than an absent section.
• Never give it a fixed height. Truncated notes on a document that may be relied on is a failure that produces no visible symptom.
• Use white-space: pre-wrap so the author's own line breaks survive while long lines still wrap to the measure.
• Set overflow-wrap: anywhere as well, because pasted content contains long unbroken strings such as URLs and reference codes.
• Cap the length at the source rather than in the layout, and if you cap it, say so in the document rather than letting it end mid-sentence.
• Keep the heading with the first lines using break-after: avoid, so a notes heading never sits alone at the foot of a page.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<!-- rendered only when notes is non-empty -->
<section class="notes-block">
  <h3>Notes</h3>
  <p class="body">Access to the rear was not available on the day.
Return visit arranged for 21 March.

Meter 4471-B could not be read.</p>
</section>

<style>
  .notes-block { margin-top: 12pt; }
  .notes-block h3 {
    break-after: avoid;            /* heading never ends a page alone */
    margin: 0 0 4pt;
    font-size: 9pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #555;
  }
  .notes-block .body {
    margin: 0;
    white-space: pre-wrap;         /* keep the author's line breaks */
    overflow-wrap: anywhere;       /* pasted URLs and codes still break */
    font-size: 9.5pt;
    line-height: 1.5;
    /* no height, no max-height: never truncate */
  }
</style>

What breaks when it is built the obvious way

Giving the block a max-height with overflow hidden so it cannot disturb the layout. The layout is then stable and the document is wrong, and nothing about the output shows that anything was cut. If the notes must be bounded, bound them where the text is stored and say what you did.

How to prove it survived pagination

Render with the notes field empty, with a single word, and with four pages of pasted text including a long URL. The empty case should have no heading, the long case should flow onto as many pages as it needs with nothing cut, and the URL should break rather than overflow the measure.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The work order template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.