white-space란 무엇인가

white-space는 HTML 요소 안의 공백(space), 줄바꿈(newline), 탭(tab)을 어떻게 처리할지를 결정하는 CSS 속성이다.
텍스트가 어디서 줄바꿈되는지, 연속된 공백을 유지할지/합칠지에 직접적인 영향을 준다.

---

기본 문법

.selector {
  white-space: normal;
}

---

주요 속성 값 정리

white-space: normal (기본값)

white-space: normal;

• 연속된 공백 → 하나로 합쳐짐
• 자동 줄바꿈 허용
• \n(개행 문자) 무시

일반적인 텍스트 렌더링에 사용

---

white-space: nowrap

white-space: nowrap;

• 공백은 하나로 합쳐짐
• 자동 줄바꿈 금지
• 한 줄로 계속 출력됨

테이블 컬럼, 버튼 텍스트에 자주 사용

th {
  white-space: nowrap;
}

---

white-space: pre

white-space: pre;

• 공백 유지
• 줄바꿈 유지
• 자동 줄바꿈 없음

<pre> 태그와 동일한 동작

<div style="white-space: pre;">
  A     B
  C     D
</div>

---

white-space: pre-wrap

white-space: pre-wrap;

• 공백 유지
• 줄바꿈 유지
• 자동 줄바꿈 허용

줄바꿈이 있는 텍스트를 화면 크기에 맞게 보여줄 때 가장 많이 사용

---

white-space: pre-line

white-space: pre-line;

• 공백은 하나로 합쳐짐
• 줄바꿈 유지
• 자동 줄바꿈 허용

사용 빈도는 낮지만 메시지 출력 등에 사용 가능

---

속성별 동작 비교 표

값	공백 유지	줄바꿈 유지	자동 줄바꿈
normal	X	X	O
nowrap	X	X	X
pre	O	O	X
pre-wrap	O	O	O
pre-line	X	O	O

---

자주 쓰는 패턴

1. 한 줄 말줄임 처리와 함께 사용

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

---

2. 사용자 입력 텍스트 그대로 출력

.content {
  white-space: pre-wrap;
}

• 게시글 내용
• 댓글
• textarea 입력 결과 출력

---

정리

• white-space는 텍스트 레이아웃 제어의 핵심 속성이다.
• 실무에서는 nowrap, pre-wrap 사용 빈도가 가장 높다.
• 줄바꿈 이슈가 발생하면 가장 먼저 확인해야 할 CSS 속성 중 하나이다.