Codectionary / Developer documentation / CSS

Wrapping Long Words and Identifiers

overflow-wrap allows otherwise unbreakable strings to wrap when needed. anywhere also affects intrinsic minimum sizing, helping content fit narrow Grid or Flexbox items. hyphens: auto uses language-sensitive hyphenation when the browser has an appropriate dictionary; it is not guaranteed for every language.

Syntax

.content { overflow-wrap: anywhere; hyphens: auto; }

Examples

Wrapping Long Words and Identifiers: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.identifier, .prose { max-width: 12rem; border: 1px solid; padding: .5rem; }
.identifier { overflow-wrap: anywhere; }
.prose { hyphens: auto; }
  1. Expected result: The identifier stays within its box by breaking as needed; prose hyphenation depends on browser language support.
  2. anywhere permits emergency breaks without inserting a hyphen.
  3. hyphens: auto relies on the content language declared by lang.
HTML used by this example

<p class="identifier">build_2026_very_long_identifier_without_spaces_0123456789</p><p class="prose" lang="en">Extraordinarily long terminology can benefit from automatic hyphenation.</p>

Best practices

  • Prefer overflow-wrap to word-break: break-all for general text.
  • Use realistic URLs and localized content when testing narrow layouts.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading