The long word that will not bend
Live demo
build 9f8a7c6e5d4b3a2f1e0d9c8b7a6f5e4dcafe12 failed
build 9f8a7c6e5d4b3a2f1e0d9c8b7a6f5e4dcafe12 failed
Caveat and fallback
CaveatThree properties fight over this and only one of them is usually right. overflow-wrap: anywhere and its older sibling break-word paint identically in a fixed box — both break the long token only when it has nowhere else to go — but they differ where nobody looks: anywhere lets the breaks count towards min-content size, so inside a flex or grid track the column can actually get narrow, where break-word holds the track at the full unbroken word and the “fix” changes nothing. word-break: break-all is the blunt instrument — it breaks mid-word everywhere, prose included; it exists for CJK text, not for comments with links in them. None of the three hyphenate: a break is a cut, and the hyphens live in a different property with a lang requirement.
Fallbackanywhere is the youngest of the family, and an engine that predates it drops the declaration — so declare break-word first and anywhere second, and the museum still bends the token in a fixed layout. The truly ancient spelling is word-wrap, an alias engines have promised to keep forever; it buys nothing new, but it is why twenty-year-old stylesheets still work.
Source code
.comment {
/* old engines keep the first,
new ones take the second */
overflow-wrap: break-word;
overflow-wrap: anywhere;
}
/* not this: made for CJK, it
breaks prose mid-word too */
.comment { word-break: break-all; }
Published