CSS word-break 정리

한글은 컨테이너 너비에 맞춰 알아서 줄바꿈되는데, 영문이나 숫자는 셀을 뚫고 나갑니다. 이건 CSS가 아니라 유니코드 명세에서 비롯된 동작입니다.

한글은 되고 영문은 안 되는 이유

유니코드는 모든 문자에 Line Break class를 부여합니다. 이 분류가 줄바꿈 동작을 결정합니다.

한글/중국어/일본어(CJK) 문자는 ID(Ideographic) 클래스입니다. 글자와 글자 사이가 전부 줄바꿈 가능 지점이라 컨테이너 너비에 맞춰 자연스럽게 끊깁니다. 한글은 음절 하나하나가 독립적 의미를 가질 수 있어서 CJK와 동일하게 취급됩니다.

반면 영문/숫자는 AL(Alphabetic) 클래스입니다. 공백이나 하이픈 같은 명시적 구분자에서만 줄바꿈됩니다. 11111111111111 같은 공백 없는 문자열은 줄바꿈 지점이 없어서 셀을 넘칩니다.

CSS에서는 이 기본 동작을 바꿀 수 있는 속성이 몇 가지 있습니다. word-break, overflow-wrap, line-break가 각각 다른 레벨에서 줄바꿈을 제어합니다.

word-break

Line Break class 자체를 재정의하는 속성입니다.

normal (기본값)

Unicode UAX #14 알고리즘을 그대로 따릅니다.

CJK: 글자 사이 어디서든 줄바꿈 (ID 클래스)
Latin/숫자: 공백, 하이픈 등 구분자에서만 줄바꿈 (AL 클래스)

"안녕하세요반갑습니다"  → 셀 너비에 맞춰 글자 단위로 줄바꿈
"HelloWorldTest"       → 공백 없으면 한 줄로 넘침

break-all

AL 클래스 문자의 줄바꿈 규칙을 ID처럼 변경합니다. 비-CJK 문자도 글자 사이 어디서든 줄바꿈을 허용하게 됩니다. CJK는 이미 글자 단위로 끊기니까 변화 없습니다.

"11111111111111" → 셀 너비에 맞춰 "1111111\n1111111" 처럼 끊김

overflow가 발생하는 지점에서 바로 끊습니다.

keep-all

break-all의 정반대입니다. CJK의 ID 클래스를 AL로 재분류해서 공백에서만 줄바꿈되도록 변경합니다.

"안녕하세요반갑습니다"  → 공백 없으면 한 줄로 넘침 (Latin처럼)
"안녕하세요 반갑습니다" → "안녕하세요" 에서 줄바꿈

한국어처럼 띄어쓰기가 있는 언어에서 단어 단위 줄바꿈을 유지하고 싶을 때 씁니다.

auto-phrase (실험적)

브라우저가 자연어 분석을 통해 의미 단위(phrase)에서 줄바꿈합니다. normal에서는 글자 단위로 아무 데서나 끊기지만, auto-phrase는 의미 단위를 파악해서 자연스러운 위치에서 끊습니다. 브라우저 지원이 매우 제한적이라 실무에서는 아직 쓰기 어렵습니다.

overflow-wrap

word-break가 Line Break class를 재정의하는 거라면, overflow-wrap은 class는 그대로 두고 overflow가 발생했을 때의 대응 방식을 지정합니다.

break-word

단어를 먼저 다음 줄로 이동시킵니다. 그래도 넘치면 그때 글자 단위로 끊습니다.

word-break: break-all과 비슷해 보이지만 전략이 다릅니다. break-all은 overflow 지점에서 즉시 끊고, overflow-wrap: break-word는 단어 이동을 먼저 시도합니다.

┌──────────┐         ┌──────────┐
│ break-all│         │overflow- │
│ Helloooo │         │wrap      │
│ oWorld   │         │          │
│          │         │Hellooooo │
│          │         │oWorld    │
└──────────┘         └──────────┘
 즉시 끊음            단어 이동 후 끊음

overflow-wrap: break-word가 보통 더 자연스럽습니다. 테이블 셀처럼 너비가 고정된 경우에는 break-all이 더 확실합니다.

anywhere

시각적 결과는 break-word와 동일합니다. 차이는 브라우저가 요소의 최소 너비(min-content)를 계산할 때 발생합니다.

break-word — min-content 계산 시 줄바꿈 지점을 무시합니다. 가장 긴 단어 기준으로 최소 너비가 결정됩니다.
anywhere — min-content 계산 시 줄바꿈 지점을 반영합니다. 글자 1개 너비까지 축소 가능합니다.

/* 컨테이너가 width: min-content 일 때 */

overflow-wrap: break-word
┌──────────────────┐
│Pneumonoultramicr │  ← min-content = 가장 긴 단어 너비
│oscopicsilicovolc │
│anokoniosis       │
└──────────────────┘

overflow-wrap: anywhere
┌──┐
│Pn│  ← min-content = 글자 1개 너비까지 줄어듦
│eu│
│mo│
└──┘

고정 너비 컨테이너에서는 둘 다 동일하게 보입니다. flex/grid 레이아웃에서 요소 크기가 min-content 기반으로 결정될 때 이 차이가 드러납니다.

참고로 deprecated된 word-break: break-word는 내부적으로 overflow-wrap: anywhere + word-break: normal과 동일하게 동작합니다. min-content 계산에도 영향을 줍니다. 쓰지 마세요. overflow-wrap을 대신 쓰면 됩니다.

line-break

word-break와 overflow-wrap이 일반 텍스트의 줄바꿈을 다뤘다면, line-break는 CJK 문장부호(구두점, 괄호 등)의 줄바꿈 규칙을 세밀하게 제어합니다.

auto — 브라우저 기본
loose — 느슨한 규칙 (짧은 줄에 적합)
normal — 일반 규칙
strict — 엄격한 규칙 (「」 같은 괄호 뒤에서 줄바꿈 금지 등)
anywhere — 모든 문장부호 앞뒤에서 줄바꿈 허용