[CSS] Text Module: white-space, word-break, overflow-wrap

CSS Text Module

"텍스트 줄바꿈 속성" 또는 "텍스트 제어 속성" (Text Wrapping / Line Breaking Properties)

 

---

CSS white-space

연속 공백(스페이스/탭), Enter 줄바꿈, 자동 줄바꿈(Wrap)의 3가지 처리 방식을 결정하는 속성

 

속성값	연속 공백	Enter 줄바꿈	자동 줄바꿈 (Wrap)	비고
normal	1개로 합침	무시 (공백 전환)	O	기본값
nowrap	1개로 합침	무시 (공백 전환)	X	줄바꿈 없이 한 줄로 계속 출력
pre	그대로 유지	그대로 유지	X	HTML <pre> 태그처럼 동작
pre-wrap	그대로 유지	그대로 유지	O	원본 공백/줄바꿈을 다 살리면서 자동 줄바꿈
pre-line	1개로 합침	그대로 유지	O	줄바꿈만 살리고 불필요한 공백은 정리

 

핵심 규칙:

• pre가 붙음: 작성한 Enter 줄바꿈이 살아남음
• wrap이 있거나 normal/pre-line: 창 너비에 맞춰 자동 줄바꿈 적용
• line이 붙음: 스페이스/탭 같은 연속 공백만 1개로 압축

---

CSS word-break

줄 끝에 다다랐을 때 단어를 끊는 기준을 결정하는 속성

 

속성값	한글/동양어 처리	영문 처리	비고
normal	1개로 합침	단어 단위 유지	기본값 (언어별 기본 규칙)
keep-all	1개로 합침	단어 단위 유지	한글 가독성 향상 (단어 잘림 방지)
break-all	그대로 유지	글자 단위 쪼갬	영문도 즉시 쪼개 상자 넘침 방지
break-word	(Deprecated)	(Deprecated)	overflow-wrap: break-word 사용 권장

 

핵심 규칙:

• keep-all: 한글을 띄어쓰기 단어 단위로 보존 (어설프게 글자가 잘리는 것 방지)
• break-all: 언어 상관없이 오른쪽 끝에 닿으면 글자 단위로 무조건 분할

---

CSS overflow-wrap (구 word-wrap)

상자 너비보다 긴 단어(예: 긴 URL, 이메일)가 넘칠 때의 예외 처리 방식을 결정하는 속성

 

속성값	일반 단어 처리	상자보다 긴 단어(URL)	비고
normal	단어 단위 유지	상자 밖으로 튀어나옴	기본값
nowrap	단어 단위 유지	넘칠 때만 예외적으로 쪼갬	긴 링크/계좌번호 상자 깨짐 방지
pre	단어 단위 유지	넘칠 때만 예외적으로 쪼갬	break-word와 유사하며 최소 너비 계산 방식만 차이

 

핵심 규칙:

• normal: 단어를 안 끊어서 상자를 뚫고 나감
• break-word: 평소엔 단어 모양을 유지하다가, 상자를 뚫고 나갈 때만 예외로 쪼갬