CSS white-space 속성은 텍스트의 줄바꿈과 공백 처리를 제어하는 핵심 기능입니다. 특히 nowrap 값을 사용하면 텍스트가 한 줄로 유지되어 레이아웃이 깨지지 않도록 방지할 수 있습니다. 실제 업무에서 버튼, 메뉴, 표 셀처럼 텍스트가 한 줄로 고정되어야 하는 경우에 자주 활용됩니다.
다만 white-space: nowrap만 단독으로 쓰면 텍스트가 컨테이너 밖으로 넘칠 수 있습니다. 이를 방지하려면 overflow: hidden이나 text-overflow: ellipsis를 함께 사용하는 것이 일반적입니다. 아래에서 실무에서 바로 적용할 수 있는 방법과 주의할 점을 정리했습니다.
white-space nowrap만 쓰면 생기는 문제
white-space: normal이 기본값이고, 이 상태에서는 텍스트가 가로 영역을 넘어가면 자동으로 줄바꿈됩니다. nowrap을 적용하면 줄바꿈이 사라지지만, 그 순간부터 텍스트는 컨테이너 경계를 무시하고 옆으로 계속 늘어납니다.
예를 들어 가로 200px인 div 안에 긴 문장이 있다면, nowrap 적용 시 텍스트가 박스를 벗어나 화면 밖으로 삐져나갑니다. 이는 모바일 화면에서 특히 치명적인데, 화면 폭이 좁을수록 넘침이 두드러지기 때문입니다. 그래서 nowrap을 쓸 때는 반드시 overflow: hidden을 함께 지정해 넘친 부분을 숨겨야 합니다.
.box {
white-space: nowrap;
overflow: hidden;
}
이렇게 하면 텍스트는 한 줄로 유지되면서 박스 밖으로 나가지 않습니다. 다만 텍스트가 잘려 보일 수 있는데, 이때 text-overflow: ellipsis를 추가하면 잘린 부분이 말줄임표(...)로 표시됩니다.
줄바꿈 금지가 꼭 필요한 실무 상황 3가지
white-space: nowrap은 특정 UI 구성 요소에서 거의 필수적으로 사용됩니다. 실제 프로젝트에서 다음과 같은 상황에서 자주 적용됩니다.
상단 내비게이션 메뉴
메뉴 항목이 두 줄로 넘어가면 헤더 높이가 들쭉날쭉해지고 전체 레이아웃이 흔들립니다. 메뉴 텍스트에 nowrap을 적용하면 고정된 한 줄로 유지되고, max-width와 overflow: hidden을 함께 쓰면 일정 너비 이상 넘어갈 때 말줄임 처리됩니다.
버튼과 라벨
버튼 텍스트가 줄바꿈되면 버튼 크기가 제각각이 되어 디자인이 무너집니다. 특히 짧은 문구를 담는 액션 버튼은 nowrap을 기본으로 적용하는 것이 안전합니다. 다만 버튼 가로폭이 지나치게 좁으면 텍스트가 보이지 않을 수 있으니 min-width를 함께 설정하는 것이 좋습니다.
테이블의 숫자·금액 데이터
엑셀처럼 고정 폭 테이블을 만들 때 숫자나 금액이 줄바꿈되면 정렬이 깨지고 가독성이 떨어집니다. 특히 퍼센트나 통화 단위가 포함된 데이터는 nowrap을 걸어 한 줄로 유지하는 것이 일반적입니다. 이 경우 white-space: nowrap과 함께 text-align: right를 적용하면 숫자 정렬이 훨씬 깔끔해집니다.
말줄임표까지 적용하는 코드 한 줄
실무에서 가장 많이 쓰는 조합은 바로 white-space: nowrap과 overflow: hidden, text-overflow: ellipsis 세 가지입니다. 이 세 속성을 한 요소에 적용하면 다음과 같은 결과가 나옵니다.
.box {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
이 코드의 동작 방식은 간단합니다. 텍스트는 무조건 한 줄로 유지되고, 200px 너비를 넘어가면 잘린 부분이 말줄임표로 표시됩니다. 사용자 입장에서는 "내용이 더 있다"는 힌트를 얻을 수 있어 UX 측면에서도 좋습니다.
이 패턴은 뉴스 기사 목록, 상품명, 파일명, 공지사항 제목 등 길이가 제각각인 텍스트를 일관된 높이로 표시해야 할 때 두루 쓰입니다. 한 번 익혀두면 거의 매일 사용하게 되는 코드입니다.
white-space 속성 값 비교와 선택 기준
white-space는 nowrap 외에도 여러 값을 제공합니다. 상황에 따라 적절한 값을 선택하는 것이 중요한데, 각 값이 실제로 어떻게 동작하는지 정리했습니다.
| 속성 값 | 공백 처리 | 줄바꿈 | 엔터키 인식 | 주요 사용처 |
|---|---|---|---|---|
| normal | 하나로 압축 | 자동 줄바꿈 | 무시 | 기본 텍스트 |
| nowrap | 하나로 압축 | 줄바꿈 없음 | 무시 | 버튼, 메뉴, 한 줄 고정 |
| pre | 그대로 유지 | 자동 줄바꿈 없음 | 유지 | 코드 블록, 문서 원본 |
| pre-wrap | 그대로 유지 | 자동 줄바꿈 | 유지 | 시나리오, 공백 포함 문장 |
| pre-line | 하나로 압축 | 자동 줄바꿈 | 유지 | 공백은 압축하되 엔터는 유지 |
pre는 <pre> 태그처럼 공백과 엔터를 그대로 보존하고 싶을 때 사용합니다. pre-wrap은 공백을 유지하면서도 화면 너비에 맞춰 자동 줄바꿈이 필요할 때, pre-line은 엔터키 줄바꿈만 유지하고 공백은 압축하고 싶을 때 선택합니다.
모바일 화면에서 nowrap 적용 시 주의할 점
white-space: nowrap은 데스크톱 환경에서는 문제없이 동작하지만, 모바일에서는 화면 폭이 좁아 텍스트가 지나치게 잘릴 수 있습니다. 이 경우 미디어 쿼리로 화면 크기에 따라 속성을 다르게 적용하는 방법을 사용합니다.
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 480px) {
.title {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
}
이렇게 하면 모바일에서는 텍스트가 자연스럽게 줄바꿈되고, 데스크톱에서는 한 줄로 고정됩니다. 모바일 사용자가 텍스트를 읽기 어려울 정도로 잘리는 상황을 방지하기 위해, nowrap을 쓸 때는 항상 반응형 대응까지 고려하는 것이 좋습니다.
FAQ
Q. white-space nowrap을 한글 텍스트에도 적용할 수 있나요?
영문뿐 아니라 한글도 동일하게 적용됩니다. 한글은 띄어쓰기 단위로 줄바꿈이 발생하는데, nowrap을 걸면 모든 공백이 무시되고 텍스트 전체가 하나의 연속된 줄로 처리됩니다.
Q. text-overflow ellipsis를 썼는데 말줄임표가 안 나타납니다.
text-overflow는 overflow: hidden과 white-space: nowrap이 함께 적용된 상태에서만 동작합니다. 세 조건 중 하나라도 빠지면 말줄임표가 표시되지 않습니다. 그리고 해당 요소에 display: block이나 inline-block이 적용되어 있어야 정상적으로 동작합니다.
Q. white-space normal과 nowrap의 차이는 무엇인가요?
normal은 기본 상태로, 텍스트가 컨테이너 너비를 넘어가면 자동으로 줄바꿈됩니다. nowrap은 이 자동 줄바꿈을 막고 모든 텍스트를 한 줄로 강제합니다. 공백 처리 방식도 달라서, normal은 연속된 공백을 하나로 합치지만 nowrap은 공백을 유지한 채 줄바꿈만 방지합니다.
Q. 버튼 텍스트 줄바꿈을 막고 싶은데 max-width를 어느 정도로 설정해야 하나요?
버튼의 내용 길이에 따라 다르지만, 보통 버튼에 들어가는 텍스트 길이를 고려해 min-width를 함께 지정하는 것이 좋습니다. 예를 들어 버튼 텍스트가 "확인", "취소"처럼 짧다면 min-width: 60px 수준으로 설정하고, max-width는 부모 컨테이너에 맞춰 100%로 두는 것이 안전합니다.