A long URL or a compound identifier in the middle of a paragraph can push a column wider than the page. The fix is a pair of properties with different personalities, and using both together is the entire trick.
html { lang: en; }
p { hyphens: auto; overflow-wrap: anywhere; }What each one does
- hyphens: auto inserts real hyphenation points using the document language; with a wrong lang on html the browser cannot know the rules, so set the language first.
- overflow-wrap: anywhere permits a break inside any too-long unbreakable token, which catches URLs, hashes, and identifiers no dictionary contains.
- anywhere also softens the minimum-content width of the box, because the word no longer forces it; that is what lets the column shrink.
The combo, not either alone
Hyphenation alone leaves the URL intact at the line edge; anywhere alone breaks words with no visible mark. Together, prose gets a civilized hyphen and machine tokens get a hard break, and neither behaves badly where it hurts.
Multilingual pages get extra value: the browser hyphenates each paragraph in its own language, so an gacor German compound and a short English phrase coexist without a special case.
Test once with a forty-character slug in a narrow card. If it sits, the pair is deployed; if it hangs over, some lang attribute is lying.