테이블 — word-break:break-all로 줄바꿈 강제 완전 정리

 

 

Web Development · HTML Table

테이블 오버플로 해결 —
word-break:break-all

표 안의 띄어쓰기 없는 긴 텍스트를 강제로 줄바꿈하기

시작 오늘 분석할 코드

이전 예제(table-layout1)에서 발생한 "긴 텍스트가 셀 밖으로 튀어나가는" 문제를 word-break: break-all 한 줄로 해결한 코드.

.table1 { border-collapse: collapse; width: 300px; table-layout: fixed; word-break: break-all; /* ★ 강제 줄바꿈 */ height: auto; } .table1 td { width: 150px; border: 1px solid black; padding: 5px; }

실제 출력 미리보기 (강제 줄바꿈 적용)

한글로띄어쓰기없기길게붙여쓰기

long_description_without_space

※ 이전엔 셀을 뚫고 옆으로 튀어나가던 텍스트가 이제 셀 너비 안에서 강제로 줄바꿈된다.

용어 용어 정리

word-break긴 단어를 어떻게 줄바꿈할지 결정

break-all어디서든 줄바꿈 — 단어 중간이라도

keep-allCJK(한·중·일) 단어 안에서는 줄바꿈 금지

normal (기본)언어별 기본 규칙 — 띄어쓰기·하이픈에서만

overflow-wrap박스 넘는 단어만 줄바꿈 — 더 부드러움

height: auto줄바꿈 추가로 셀이 길어질 때 자동 확장

---

1 word-break 값 비교

값	동작	적합한 곳
normal	기본 — 띄어쓰기·하이픈에서만 줄바꿈	일반 본문
break-all	어디서든 강제 줄바꿈	좁은 셀, URL, 코드
keep-all	CJK 단어는 통째로 (단어 단위 줄바꿈)	한국어 본문 가독성 향상
break-word	레거시 — overflow-wrap: anywhere로 대체	옛 코드 호환

---

2 word-break vs overflow-wrap

word-break: break-all

박스를 안 넘어도 단어 중간 강제 줄바꿈 → 짧은 단어도 끊김. 좁은 셀에 적합하지만 본문 어색.

overflow-wrap: anywhere

박스를 넘는 단어만 줄바꿈 → 일반 단어는 그대로. 본문에 자연스러움.

"이것은긴문장입니다 hello" word-break: break-all 이것은긴 문장입니 다 hell o ← 짧은 hello도 끊김 overflow-wrap: anywhere 이것은긴문장입니다 hello ← 박스를 안 넘으니 그대로

※ 한국어 본문 권장 조합

• word-break: keep-all — 한국어 단어 단위 줄바꿈으로 가독성 ↑
• overflow-wrap: anywhere — URL이나 긴 식별자만 끊음
• 두 개 같이 쓰는 게 한국어 본문의 모범 패턴

---

반응형

3 height: auto는 왜 명시했나?

이 코드의 height: auto는 사실 기본값과 같다. 하지만 명시적으로 적은 이유는 다른 CSS에서 height가 지정됐을 가능성에 대비한 안전 장치다. word-break로 줄이 늘어나면 셀이 그만큼 길어져야 하므로 height가 고정되지 않아야 함.

---

4 셀이 늘어나면 안 될 때 — 다른 처리법

방법	동작
overflow: hidden	셀 밖으로 튀어나간 부분 잘라냄 (보이지 않음)
text-overflow: ellipsis	잘린 끝에 "…" 표시
white-space: nowrap	줄바꿈 자체를 금지 — 한 줄에 강제

/* 한 줄로 잘리고 ...로 끝내기 */ td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } → "한글로띄어쓰기없기…"

---

5 자주 하는 실수

실수	증상	해결
break-all을 본문 전체에	일반 단어도 어색하게 끊김	본문은 keep-all + overflow-wrap
height 고정 + word-break	줄 늘어났는데 셀 안 커짐 → 내용 잘림	height: auto 또는 max-height + overflow
nowrap만 쓰고 overflow 처리 없음	긴 텍스트가 옆으로 튀어나감	nowrap + overflow + text-overflow 세트
모바일에서 셀 너무 좁음	한 글자씩 끊김	media query로 모바일은 fixed 해제

---

핵심 한 줄 요약

word-break긴 단어 줄바꿈 정책

break-all어디서든 강제 줄바꿈 — 좁은 셀·URL용

keep-all한국어 단어 보존 — 본문 가독성

overflow-wrap박스 넘을 때만 — 더 부드러운 처리

한국어 본문keep-all + overflow-wrap: anywhere 조합

한 줄 자르기overflow:hidden + text-overflow:ellipsis + white-space:nowrap

Tags

#word-break #break-all #keep-all #overflow-wrap #줄바꿈 #한글줄바꿈 #table-layout #fixed #단어끊기 #ellipsis #white-space #text-overflow #CSS테이블 #웹개발 #HTML #티스토리

▼ 티스토리 태그 입력란 복사용

word-break, break-all, keep-all, overflow-wrap, 줄바꿈, 한글줄바꿈, table-layout, fixed, 단어끊기, ellipsis, white-space, text-overflow, CSS테이블, 웹개발, HTML, 티스토리