WebCraft

overflow-wrap: anywhere

The long word that will not bend

default — the hash escapes

build 9f8a7c6e5d4b3a2f1e0d9c8b7a6f5e4dcafe12 failed

overflow-wrap: anywhere

build 9f8a7c6e5d4b3a2f1e0d9c8b7a6f5e4dcafe12 failed

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.

CSS
.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