CSS Text Playground
Interactive playground for overflow, white-space, word-break, overflow-wrap, and hyphens
Interactive playground for overflow, white-space, word-break, overflow-wrap, and hyphens
The dashed border shows the container width — adjust it on the left to test how the text reflows.
width: 360px;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
word-break: normal;
overflow-wrap: normal;
hyphens: none;
-webkit-hyphens: none;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 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.
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.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.