word-break

Controls how words wrap at container edges. Essential for long URLs, hash values, CJK text.

Class List

Class	CSS	Description
`wbn`	word-break: normal	Default. Break at standard points
`wbba`	word-break: break-all	Break between any characters. For URLs, hashes
`wbbw`	word-break: break-word	Break words only on overflow. Readability first
`wbka`	word-break: keep-all	Preserve CJK words. Essential for Korean
`wbap`	word-break: auto-phrase	Browser determines breaks at phrase boundaries
`wbinh`	word-break: inherit	Inherit parent word-break
`wbini`	word-break: initial	Reset to initial (normal)
`wbr`	word-break: revert	Revert to user agent default
`wbrl`	word-break: revert-layer	Revert to previous cascade layer
`wbu`	word-break: unset	inherit if inheritable, otherwise initial

Visual Comparison

Compares URL handling in fixed-width container with each value.

Normal — wbn

https://www.example.com/very/long/url/path/that/keeps/going/and/going/without/any/breaks

Default rules. Long words may overflow

Break All — wbba

https://www.example.com/very/long/url/path/that/keeps/going/and/going/without/any/breaks

Break between any characters to prevent overflow

Break Word — wbbw

https://www.example.com/very/long/url/path/that/keeps/going/and/going/without/any/breaks

Break words only on overflow. Better readability

Keep All — wbka

https://www.example.com/very/long/url/path/that/keeps/going/and/going/without/any/breaks

Preserve CJK words. No effect on English URLs

Auto Phrase — wbap

https://www.example.com/very/long/url/path/that/keeps/going/and/going/without/any/breaks

Browser auto-determines semantic break positions

CJK Text Comparison

Confirms wbka (keep-all) effect on Korean, Chinese, Japanese text.

default value (normal) —wbn

한국어 텍스트는 기본적으로 글자 단위로 줄바꿈이 발생하여 단어가 중간에 잘릴 수 있습니다.

Break per character (words split mid-way)

Keep All — wbka

한국어 텍스트는 기본적으로 글자 단위로 줄바꿈이 발생하여 단어가 중간에 잘릴 수 있습니다.

Break at spaces (words preserved)

Class Details

`wbn`word-break: normal

Default rules. English breaks at spaces, CJK at character level. Usually sufficient.

<!-- Default word break (sufficient in most cases) -->
<p class="wbn">
  Normal text wraps at spaces between words.
  Works naturally without special settings.
</p>

`wbba`word-break: break-all

Allows breaks between any characters. For long URLs, hashes, file paths. Words may split mid-way, reducing readability.

<!-- Handle long URLs -->
<td class="wbba maxw20rem">
  https://www.example.com/very/long/url/path/without/spaces
</td>

<!-- Display hash values -->
<code class="wbba fs13px">
  0x1234567890abcdef1234567890abcdef12345678
</code>

<!-- Prevent overflow in fixed width container -->
<div class="wbba w20rem b1pxsolid27272A p16px">
  VeryLongWordWithoutAnySpacesThatWouldOverflow
</div>

Caution

wbba splits words mid-way, not for regular text. Use wbbw for readability.

`wbbw`word-break: break-word

Breaks words only on overflow. Better readability than wbba, recommended for regular text.

<!-- Safe word break in normal text -->
<p class="wbbw">
  Normal text and https://very-long-url.example.com/path
  are handled safely when mixed together.
</p>

<!-- Comments, user input -->
<div class="wbbw bg18181B p2rem br8px">
  Even when user input contains long URLs or words,
  it does not overflow the container.
</div>

wbba vs wbbw difference

	wbba	wbbw
Break Point	항상 문자 단위	넘칠 때만
Readability	낮음 (단어 중간 절단)	높음 (가능하면 단어 유지)
Suitable Use	테이블 셀, 해시값	일반 텍스트, 댓글
Empty Space	최소화	일부 발생 가능

`wbka`word-break: keep-all

Preserves words in CJK text. Essential for Korean, breaks at spaces.

<!-- Korean body text -->
<article class="wbka lh1-7 fs16px">
  When using keep-all for Korean text,
  words are not broken in the middle and wrap at
  spaces naturally.
</article>

<!-- Korean text card -->
<div class="wbka bg18181B p2rem br8px maxw30rem">
  <h3 class="fs16px cFAFAFA mb8px">Frontend developer hiring</h3>
  <p class="c71717A fs14px">
    We are looking for a frontend developer with
    React and TypeScript experience. See the careers page for details.
  </p>
</div>

Essential for Korean projects

Apply wbka to body areas by default for Korean content. Prevents mid-word splits, greatly improving readability.

`wbap`word-break: auto-phrase

Browser auto-determines break positions at phrase boundaries. More natural CJK breaking than wbka.

<!-- Natural phrase-level word break -->
<p class="wbap lh1-7 fs16px">
  The browser automatically determines
  meaningful break positions.
</p>

<!-- Use with fallback -->
<p class="wbka wbap">
  Falls back to keep-all in browsers without auto-phrase support
</p>

Check browser support

auto-phrase is new, may not be supported everywhere. Consider wbka as fallback.

Tips & Notes

wbka essential for Korean content

Korean text breaks at character level by default. wbka breaks at spaces, improving readability.

wbbw safer than wbba

wbbw only breaks on overflow. wbba always breaks at character level, for tables/fixed cells.

Use with overflow-wrap

When word-break alone is insufficient, owbw (overflow-wrap: break-word) provides more reliable overflow prevention.

white-space overflow text typography