문제 상황
댓글, 채팅, 리뷰처럼 사용자가 입력한 텍스트를 고정폭 박스 안에 보여줘야 할 때, 띄어쓰기 없이 길게 붙여 쓴 문자열(예: URL, 연속된 영문/숫자)이 레이아웃을 밀어내는 문제가 생긴다.
| 댓글 영역 |
-----------
| https://verylongurlexampledotcomsomethingsomething... | ← 박스 밖으로 삐져나감이걸 해결하려고 검색하면 word-break, overflow-wrap, word-wrap 같은 속성들이 우르르 나오는데, 비슷해 보여도 동작이 제각각이다. 상황에 맞춰 골라 써야 한다.
네 가지 속성 한눈에 보기
1. word-break: break-all
글자 단위로 무조건 끊는다. 공백이 있어도 무시하고 줄 끝에 도달하면 바로 끊어버림.
.text-a { word-break: break-all; }2. overflow-wrap: break-word
평소엔 단어 단위로 끊고, 한 단어가 너무 길어 넘칠 때만 중간에서 끊는다. 가장 자연스러운 줄바꿈 동작.
.text-b { overflow-wrap: break-word; }3. overflow-wrap: anywhere
break-word와 동작은 비슷하지만 min-content 계산에도 영향을 준다. 테이블 셀처럼 컨테이너가 콘텐츠 크기에 맞춰 늘어나는 환경에서 더 안정적.
.text-c { overflow-wrap: anywhere; }4. word-wrap: break-word (구 이름)
overflow-wrap이 표준으로 정리되기 전 이름. 동작은 overflow-wrap: break-word와 완전히 동일하고, IE5.5부터 지원하므로 레거시 호환용으로만 병기한다.
.text-d {
overflow-wrap: break-word;
word-wrap: break-word; /* IE 대응 */
}실제 차이 비교
같은 문자열을 폭 200px 박스에 넣고 속성만 바꿔보면 차이가 확실히 보인다. 실제 사용자 입력과 비슷하게, 공백이 섞인 문장을 예시로 들어보자.
입력: "안녕하세요 https://verylongurlexampledotcomsomething 입니다"word-break: break-all
| 안녕하세요 https:/ |
| /verylongurlexamp |
| ledotcomsomething |
| 입니다 |→ "안녕하세요"와 "https://" 사이 공백을 무시하고 글자 단위로 뚝뚝 끊음. 한글 문장도 중간에 끊길 수 있음.
overflow-wrap: break-word
| 안녕하세요 |
| https://verylongur |
| lexampledotcomsome |
| thingsomething |
| 입니다 |→ 일반 단어 사이는 공백 기준으로 자연스럽게 끊고, 긴 URL만 중간에서 끊음. 한글 문장은 깨지지 않음. 가독성 훨씬 좋음.
이래서 사용자 입력 텍스트에는 overflow-wrap: break-word가 기본값처럼 쓰인다.
참고: 공백 없는 문자열만 있으면 결과가 같아 보인다
입력: "https://verylongurlexampledotcomsomethingsomething"이 경우엔 break-all과 break-word 둘 다 동일하게 글자 단위로 끊은 결과가 나온다.
| https://verylongur |
| lexampledotcomsome |
| thingsomething |하지만 동작 원리는 전혀 다르다. break-all은 항상 글자 단위로 끊고, break-word는 공백이 없어서 어쩔 수 없이 글자 단위로 끊은 것뿐. 공백이 포함된 순간 위 비교처럼 결과가 갈린다.
상황별 선택 가이드
| 상황 | 추천 속성 |
|---|---|
일반 div, p — 댓글/채팅/리뷰 같은 사용자 입력 | overflow-wrap: break-word (+ word-wrap 병기) |
테이블 셀(td) 안 긴 문자열 | overflow-wrap: anywhere 또는 table-layout: fixed |
| 코드 블록, 해시값, 토큰 등 "꽉 채워도 되는" 연속 문자열 | word-break: break-all |
| IE 포함 레거시 브라우저 지원 필요 | word-wrap: break-word 병기 필수 |
⚠️ 함정: 테이블 셀 안에서는 overflow-wrap: break-word가 안 먹힌다
여기까지 읽고 "그럼 overflow-wrap: break-word로 통일해야지!" 하고 적용했는데 전혀 동작하지 않는 경우가 있다. 바로 테이블 셀(td) 안에 텍스트가 있을 때다.
왜 안 될까
테이블은 기본적으로 콘텐츠 크기에 맞춰 폭이 자동으로 늘어나는 레이아웃이다. 긴 단어가 들어오면 브라우저는 줄바꿈 대신 "셀을 넓히는" 쪽을 선택한다.
그런데 overflow-wrap: break-word는 "넘칠 때만 끊는다"는 조건부 속성이다. 테이블이 애초에 넘치지 않게 셀을 늘려버리니까 발동 조건 자체가 성립하지 않는다.
같은 CSS, 다른 결과
<!-- div 안: 정상 동작 -->
<div style="width:200px; overflow-wrap:break-word;">
verylongurlexampledotcom...
</div>
→ 200px에서 칼같이 끊김 ✅
<!-- td 안: 무시됨 -->
<table style="width:200px;">
<tr><td style="overflow-wrap:break-word;">
verylongurlexampledotcom...
</td></tr>
</table>
→ 셀이 단어 길이만큼 늘어나서 테이블이 밖으로 삐져나감 ❌테이블 셀 해결책 세 가지
1. table-layout: fixed 추가
테이블 폭을 콘텐츠와 무관하게 고정시키면 break-word가 정상 동작한다. 단, 다른 셀 폭 계산 방식까지 바뀌므로 기존 레이아웃이 틀어질 수 있다.
table { table-layout: fixed; width: 100%; }2. overflow-wrap: anywhere 사용
break-word와 비슷하지만 min-content 계산에도 영향을 준다. 즉 테이블이 셀을 늘려서 피하는 것 자체를 막는다. 별도 설정 없이 테이블 셀에서도 동작.
td { overflow-wrap: anywhere; }단, IE 미지원이고 Safari는 15 이상부터 지원. 레거시 필요 없으면 가장 깔끔한 선택.
3. 그냥 word-break: break-all
레이아웃 계산과 무관하게 무조건 끊어버리므로 테이블 안이든 밖이든 상관없이 동작한다. 단어 중간이 끊기는 건 감수.
td { word-break: break-all; }테이블 셀 선택 가이드
| 상황 | 추천 |
|---|---|
| 테이블 셀 + 모던 브라우저만 | overflow-wrap: anywhere |
| 테이블 셀 + 레이아웃 고정 가능 | table-layout: fixed + overflow-wrap: break-word |
| 테이블 셀 + IE 포함 레거시 | word-break: break-all |
실제 사용 사례
- Tailwind CSS —
break-words유틸리티 =overflow-wrap: break-word - Bootstrap —
text-break유틸리티 =word-wrap+overflow-wrap: break-word - 슬랙, 디스코드 웹, 카카오톡 웹 — 채팅 메시지 영역에 동일 패턴 사용
사용자 입력 텍스트를 다루는 거의 모든 서비스가 overflow-wrap: break-word 방식을 쓴다.
정리
word-break: break-all은 공백도 무시하고 끊기 때문에 한국어 문장을 중간에서 쪼갤 수 있다. 일반 텍스트엔 부적합.- 사용자 입력 같은 자연스러운 문장엔
overflow-wrap: break-word가 기본 선택. - 단, 테이블 셀 안에서는
break-word가 안 먹히므로overflow-wrap: anywhere나table-layout: fixed를 써야 한다. - 레거시까지 챙겨야 하거나 테이블 구조를 건드리기 애매하면,
word-break: break-all이 가장 확실하고 안전한 선택지다. (실무에선 이쪽으로 타협하는 경우도 많다) - IE 지원이 필요하면
overflow-wrap과 함께 구 이름인word-wrap: break-word를 병기한다.
