word-break
단어가 컨테이너 가장자리에 도달했을 때 어떻게 줄바꿈할지 제어하는 속성입니다. 긴 URL, 해시값, CJK(한중일) 텍스트 처리에 필수적입니다.
클래스 목록
| 클래스 | 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
기본 줄바꿈 규칙. 긴 단어가 컨테이너를 넘칠 수 있습니다
Break All — wbba
어떤 문자 사이에서든 줄바꿈하여 넘침을 방지합니다
Break Word — wbbw
넘칠 때만 단어를 줄바꿈합니다. 가독성이 더 좋습니다
Keep All — wbka
CJK 텍스트에서 단어를 유지합니다. 영문 URL에는 효과 없음
Auto Phrase — wbap
브라우저가 의미 단위로 줄바꿈 위치를 자동 결정합니다
CJK 텍스트 비교
한국어, 중국어, 일본어 텍스트에서 wbka(keep-all)의 효과를 확인합니다.
기본값 (normal) — wbn
글자 단위로 줄바꿈 (단어 중간에서 잘림)
Keep All — wbka
띄어쓰기 기준으로 줄바꿈 (단어 보존)
클래스별 상세
wbnword-break: normal
기본 줄바꿈 규칙을 따릅니다. 영문은 단어 사이 공백에서, CJK 텍스트는 글자 단위로 줄바꿈됩니다. 대부분의 경우 별도 설정 없이 기본값으로 충분합니다.
<!-- 기본 줄바꿈 (대부분의 경우 충분) -->
<p class="wbn">
일반 텍스트는 단어 사이 공백에서 줄바꿈됩니다.
특별한 설정 없이도 자연스럽게 동작합니다.
</p>wbbaword-break: break-all
어떤 문자 사이에서든 줄바꿈을 허용합니다. 긴 URL, 해시값, 파일 경로 등 공백이 없는 긴 문자열이 컨테이너를 넘치지 않도록 할 때 사용합니다. 단어 중간에서 잘리므로 가독성이 떨어질 수 있습니다.
<!-- 긴 URL 처리 -->
<td class="wbba maxw20rem">
https://www.example.com/very/long/url/path/without/spaces
</td>
<!-- 해시값 표시 -->
<code class="wbba fs13px">
0x1234567890abcdef1234567890abcdef12345678
</code>
<!-- 고정 너비 컨테이너에서 넘침 방지 -->
<div class="wbba w20rem b1pxsolid27272A p16px">
VeryLongWordWithoutAnySpacesThatWouldOverflow
</div>주의
wbba는 단어 중간에서 잘리므로 일반 텍스트에는 권장하지 않습니다. 가독성이 중요하다면 wbbw를 사용하세요.
wbbwword-break: break-word
오버플로우가 발생할 때만 단어를 줄바꿈합니다. wbba보다 가독성이 좋으며, 일반 텍스트에서 긴 단어나 URL로 인한 넘침을 방지할 때 권장됩니다.
<!-- 일반 텍스트에서 안전한 줄바꿈 -->
<p class="wbbw">
일반 텍스트와 https://very-long-url.example.com/path 가
섞여 있을 때 안전하게 처리됩니다.
</p>
<!-- 댓글, 사용자 입력 -->
<div class="wbbw bg18181B p2rem br8px">
사용자가 입력한 텍스트에 긴 URL이나 단어가 포함되어 있어도
컨테이너를 넘치지 않습니다.
</div>wbba vs wbbw 차이
| wbba | wbbw | |
|---|---|---|
| 줄바꿈 시점 | 항상 문자 단위 | 넘칠 때만 |
| 가독성 | 낮음 (단어 중간 절단) | 높음 (가능하면 단어 유지) |
| 적합한 용도 | 테이블 셀, 해시값 | 일반 텍스트, 댓글 |
| 빈 공간 | 최소화 | 일부 발생 가능 |
wbkaword-break: keep-all
CJK(한국어, 중국어, 일본어) 텍스트에서 단어를 유지한 채 줄바꿈합니다. 한국어 콘텐츠에서 필수적인 클래스이며, 띄어쓰기 기준으로 줄바꿈되어 단어가 중간에 잘리지 않습니다.
<!-- 한국어 본문 -->
<article class="wbka lh1-7 fs16px">
한국어 텍스트에서는 keep-all을 사용하면
단어가 중간에 잘리지 않고 띄어쓰기 기준으로
자연스럽게 줄바꿈됩니다.
</article>
<!-- 한국어 카드 -->
<div class="wbka bg18181B p2rem br8px maxw30rem">
<h3 class="fs16px cFAFAFA mb8px">프론트엔드 개발자 채용</h3>
<p class="c71717A fs14px">
React와 TypeScript 경험이 있는 프론트엔드 개발자를
모집합니다. 자세한 내용은 채용 페이지를 참고하세요.
</p>
</div>한국어 프로젝트 필수
한국어 콘텐츠가 포함된 프로젝트에서는 본문 영역에 wbka를 기본으로 적용하는 것을 권장합니다. 단어가 중간에 잘리는 것을 방지하여 가독성이 크게 향상됩니다.
wbapword-break: auto-phrase
브라우저가 자동으로 구(phrase) 단위로 줄바꿈 위치를 결정합니다. CJK 텍스트에서 의미 단위로 더 자연스럽게 줄바꿈되며, wbka보다 정교한 줄바꿈을 제공합니다.
<!-- 자연스러운 구 단위 줄바꿈 -->
<p class="wbap lh1-7 fs16px">
브라우저가 의미 있는 단위로 줄바꿈 위치를
자동으로 결정합니다.
</p>
<!-- 폴백과 함께 사용 -->
<p class="wbka wbap">
auto-phrase 미지원 브라우저에서는 keep-all로 동작
</p>브라우저 지원 확인
auto-phrase는 비교적 새로운 값으로, 일부 브라우저에서는 지원되지 않을 수 있습니다. 폴백으로 wbka를 함께 고려하세요.
팁 & 주의사항
wbka는 한국어 콘텐츠에 필수
한국어(CJK) 텍스트는 기본적으로 글자 단위로 줄바꿈되어 단어가 중간에 잘립니다. wbka를 적용하면 띄어쓰기 기준으로 줄바꿈되어 가독성이 향상됩니다.
wbbw가 wbba보다 안전
wbbw는 넘칠 때만 단어를 잘라 가독성을 유지합니다. wbba는 항상 문자 단위로 잘라 테이블이나 고정 너비 셀에 적합합니다.
overflow-wrap과 함께 사용
word-break만으로 해결되지 않을 때 owbw(overflow-wrap: break-word)를 함께 사용하면 더 안정적으로 넘침을 방지할 수 있습니다.