CSS hyphens: wrap prose with a declared language

When to use it

A translated policy note sits in a narrow sidebar. Enable automatic hyphenation on the prose only after the HTML language is set correctly; then check languages the site actually serves. Keep invoice codes, URLs, and copyable identifiers outside that treatment, since splitting them may make transcription harder. The sample pairs auto hyphenation with overflow wrapping for an exceptionally long token, but the latter can break at points that are not linguistic syllables. Test a short English note, a long translated note, and a compound identifier. If a browser lacks an appropriate dictionary, the text may wrap differently. The paragraph must remain readable without relying on a specific hyphen position.

.policy-note { max-inline-size: 32ch; hyphens: auto; overflow-wrap: break-word; }
.policy-note__reference { hyphens: none; overflow-wrap: anywhere; }

Cost and verification

Hyphenation can change line count and therefore card height. That is a layout cost, not a defect: avoid fixed heights around legal or procedural copy. Browser dictionaries and language tags affect results, so screenshot tests should not assert an exact line break across engines. The CSS is cheap compared with font loading and layout of a long document. If an identifier must be copied exactly, keep its underlying text intact and make the visual break a presentation detail. Review print output, where narrower columns can amplify hyphenation.

Common Mistakes

• Do not enable automatic hyphenation without the correct document language.
• Do not insert hard hyphens into identifiers to force a visual break.
• Do not lock the paragraph to a fixed height after enabling wrapping.

Connected lessons

• CSS Property Decisions
• CSS text wrapping and truncation: keep records readable
• CSS line height and measure: protect long-form reading
• HTML lang, dir, and bdi: keep text pronunciation and direction stable

Further rendering decisions

• CSS :lang(): style text from its declared language