CSS text wrapping and truncation: keep records readable

How the rule works

A case card may contain a long external reference and a short preview title. The reference is evidence; it must remain readable, so permit breaks anywhere when ordinary word boundaries are absent. A preview title may be clipped in a narrow list if its full text is available in the detail view and an accessible label still exposes it. Do not put an ellipsis on the only copy of a transaction identifier. The sample uses separate classes because the two content contracts differ. A single global white-space rule would be hard to reason about, and hiding overflow on the entire card can also cut off focus indicators. Check mixed scripts, long URLs, and user zoom before declaring the layout safe.

.case-reference { overflow-wrap: anywhere; }
.case-preview__title {
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.case-preview:focus-within { outline: 2px solid #175b44; outline-offset: 2px; }

Cost and verification

Line breaking can increase block height, so a list that assumes equal card heights may need to grow. Ellipsis saves space but creates an information cost: the hidden text cannot be scanned, copied, or compared from that view. The rule does not add network requests. If a title is routinely too long, redesign the row rather than adding more clipping. The focus outline belongs outside the clipped title, on a container that remains visible. Check that full values are available in the destination and accessible to assistive technology.

Common Mistakes

• Do not apply white-space: nowrap to user-generated paragraphs.
• Do not treat an ellipsis as a substitute for a full identifier.
• Do not clip the focus ring with overflow: hidden on the whole card.

Connected lessons

• CSS Type and Media
• CSS intrinsic sizing: let content set limits without forcing overflow
• CSS overflow: contain long data without losing controls
• CSS focus-visible: keep keyboard location unmistakable

Related behavior

• CSS hyphens: wrap prose with a declared language

Further form and type decisions

• CSS text-wrap balance: improve short headings without truncation

Further rendering decisions

• CSS box-decoration-break: control a highlight across wrapped lines