word-break

단어가 컨테이너 가장자리에 도달했을 때 어떻게 줄바꿈할지 제어하는 속성입니다. 긴 URL, 해시값, CJK(한중일) 텍스트 처리에 필수적입니다.

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스	CSS	설명
`wbn`	word-break: normal	기본값. 표준 줄바꿈 지점에서 줄바꿈
`wbba`	word-break: break-all	어떤 문자 사이에서든 줄바꿈. 긴 URL, 해시값에 적합
`wbbw`	word-break: break-word	오버플로우 시에만 단어 줄바꿈. 가독성 우선
`wbka`	word-break: keep-all	CJK 텍스트 단어 유지. 한국어 필수
`wbap`	word-break: auto-phrase	브라우저가 구(phrase) 단위로 줄바꿈 결정
`wbinh`	word-break: inherit	부모 요소의 word-break 값을 상속
`wbini`	word-break: initial	초기값(normal)으로 리셋
`wbr`	word-break: revert	사용자 에이전트 기본값으로 되돌림
`wbrl`	word-break: revert-layer	이전 캐스케이드 레이어의 값으로 되돌림
`wbu`	word-break: unset	상속 가능하면 inherit, 아니면 initial

시각적 비교

고정 너비 컨테이너 안에서 긴 단어(URL)가 각 word-break 값에 따라 어떻게 처리되는지 비교합니다.

Normal — wbn

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

기본 줄바꿈 규칙. 긴 단어가 컨테이너를 넘칠 수 있습니다

Break All — wbba

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

어떤 문자 사이에서든 줄바꿈하여 넘침을 방지합니다

Break Word — wbbw

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

넘칠 때만 단어를 줄바꿈합니다. 가독성이 더 좋습니다

Keep All — wbka

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

CJK 텍스트에서 단어를 유지합니다. 영문 URL에는 효과 없음

Auto Phrase — wbap

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

브라우저가 의미 단위로 줄바꿈 위치를 자동 결정합니다

CJK 텍스트 비교

한국어, 중국어, 일본어 텍스트에서 wbka(keep-all)의 효과를 확인합니다.

기본값 (normal) — wbn

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

글자 단위로 줄바꿈 (단어 중간에서 잘림)

Keep All — wbka

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

띄어쓰기 기준으로 줄바꿈 (단어 보존)

클래스별 상세

`wbn`word-break: normal

기본 줄바꿈 규칙을 따릅니다. 영문은 단어 사이 공백에서, CJK 텍스트는 글자 단위로 줄바꿈됩니다. 대부분의 경우 별도 설정 없이 기본값으로 충분합니다.

<!-- 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

어떤 문자 사이에서든 줄바꿈을 허용합니다. 긴 URL, 해시값, 파일 경로 등 공백이 없는 긴 문자열이 컨테이너를 넘치지 않도록 할 때 사용합니다. 단어 중간에서 잘리므로 가독성이 떨어질 수 있습니다.

<!-- 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>

주의

wbba는 단어 중간에서 잘리므로 일반 텍스트에는 권장하지 않습니다. 가독성이 중요하다면 wbbw를 사용하세요.

`wbbw`word-break: break-word

오버플로우가 발생할 때만 단어를 줄바꿈합니다. wbba보다 가독성이 좋으며, 일반 텍스트에서 긴 단어나 URL로 인한 넘침을 방지할 때 권장됩니다.

<!-- 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 차이

	wbba	wbbw
줄바꿈 시점	항상 문자 단위	넘칠 때만
가독성	낮음 (단어 중간 절단)	높음 (가능하면 단어 유지)
적합한 용도	테이블 셀, 해시값	일반 텍스트, 댓글
빈 공간	최소화	일부 발생 가능

`wbka`word-break: keep-all

CJK(한국어, 중국어, 일본어) 텍스트에서 단어를 유지한 채 줄바꿈합니다. 한국어 콘텐츠에서 필수적인 클래스이며, 띄어쓰기 기준으로 줄바꿈되어 단어가 중간에 잘리지 않습니다.

<!-- 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>

한국어 프로젝트 필수

한국어 콘텐츠가 포함된 프로젝트에서는 본문 영역에 wbka를 기본으로 적용하는 것을 권장합니다. 단어가 중간에 잘리는 것을 방지하여 가독성이 크게 향상됩니다.

`wbap`word-break: auto-phrase

브라우저가 자동으로 구(phrase) 단위로 줄바꿈 위치를 결정합니다. CJK 텍스트에서 의미 단위로 더 자연스럽게 줄바꿈되며, 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>

브라우저 지원 확인

auto-phrase는 비교적 새로운 값으로, 일부 브라우저에서는 지원되지 않을 수 있습니다. 폴백으로 wbka를 함께 고려하세요.

팁 & 주의사항

wbka는 한국어 콘텐츠에 필수

한국어(CJK) 텍스트는 기본적으로 글자 단위로 줄바꿈되어 단어가 중간에 잘립니다. wbka를 적용하면 띄어쓰기 기준으로 줄바꿈되어 가독성이 향상됩니다.

wbbw가 wbba보다 안전

wbbw는 넘칠 때만 단어를 잘라 가독성을 유지합니다. wbba는 항상 문자 단위로 잘라 테이블이나 고정 너비 셀에 적합합니다.

overflow-wrap과 함께 사용

word-break만으로 해결되지 않을 때 owbw(overflow-wrap: break-word)를 함께 사용하면 더 안정적으로 넘침을 방지할 수 있습니다.

white-space overflow text typography