/text-layout

Good copy still ships broken. The words are right, and then the line wraps in the wrong place, the ellipsis never draws, or a long email pushes a card off the screen. This skill owns that layer: where text wraps, what gets cut, and how it survives.

Diagnose the container first

Most text bugs are misnamed. A “truncation bug” is usually a flex item that refuses to shrink, and no text property fixes that. min-width: 0 on the flex item, or minmax(0, 1fr) on the grid track, comes before anything on the text itself.

Orphans and pairs

Headings get text-wrap: balance and body text gets text-wrap: pretty, which removes most lone last words for free. Pairs like “3 MB” and “Jan 24” are glued so they never split, with a release at narrow widths so the glue can’t force a scrollbar. Never a hand-placed line break in stored content: a break that’s right at one width is wrong at every other.

Truncate last

Rewrite shorter or wrap first. When something must be cut, the rest has to be readable on the page, and buttons never wrap or truncate at all. A filename is cut in the middle, because its end is the part that tells two files apart.

Stress it

Text isn’t done when it fits English at 100%. It has to hold at 320px wide, at 200% text size, at twice the length in translation, and right to left.

Grounded in the CSS specs, the Chrome and WebKit engine docs, Butterick, NN/g, Baymard, WCAG and the W3C’s internationalisation notes.