CSS Text Playground

Text overflow in CSS sits at the intersection of five properties that interact in surprising ways: overflow, text-overflow, white-space, word-break, and overflow-wrap. Most frustration comes from setting one and forgetting the prerequisite on another — for example, text-overflow: ellipsis is completely silent unless the container also has overflow: hidden AND white-space: nowrap.

The classic single-line truncate

The recipe for "cut this off with an ellipsis" is three lines that all have to be there: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; Any one missing and you get a different broken state — either the text wraps, or it overflows visibly, or it's clipped without the ellipsis.

word-break vs overflow-wrap

• overflow-wrap: break-wordonly breaks a long word when it would otherwise overflow the container. It's the polite option — short words still wrap normally at spaces.
• word-break: break-all breaks any word at any character, even when it would fit. Use it sparingly because it mid-breaks short words too and looks ragged.
• overflow-wrap: anywhere is like break-word but also affects min-content sizing, which matters inside flex/grid items that would otherwise refuse to shrink.

Multi-line clamp

For "cut this off after N lines with an ellipsis", the older recipe is the -webkit-line-clamp trio. The modern replacement is line-clamp, which Chromium and Safari now ship and Firefox supports behind a flag — feel free to use it with the prefixed fallback for older Safari.