레이아웃을 만들다 보면 텍스트가 의도치 않게 줄바꿈되어 화면이 흐트러지는 경우가 있습니다. 특히 버튼, 내비게이션 메뉴, 테이블 같은 곳에서는 텍스트가 한 줄로 고정되어야 UI가 무너지지 않는데요. 이 문제는 CSS의 white-space 속성으로 해결할 수 있습니다. 정리하면, white-space: nowrap;을 적용하면 텍스트 줄바꿈이 금지되고, 여기에 overflow: hidden과 text-overflow: ellipsis를 함께 쓰면 넘치는 텍스트를 말줄임표로 처리할 수 있습니다.
줄바꿈 금지가 필요한 대표적인 상황
텍스트가 두 줄 이상으로 넘어가면 레이아웃이 무너지는 곳이 있습니다. 상단 내비게이션 메뉴가 대표적입니다. 메뉴 항목이 줄바꿈되면 헤더 높이가 들쭉날쭉해지고, 전체 페이지 레이아웃이 흔들립니다. 버튼도 마찬가지입니다. 버튼 안의 텍스트가 줄바꿈되면 버튼 크기가 제각각이 되어 디자인이 깨집니다. 고정 폭 테이블에서도 금액이나 퍼센트 같은 숫자 데이터가 줄바꿈되면 정렬이 어긋나 보기 불편해집니다.
이런 상황에서 white-space: nowrap;을 적용하면 텍스트가 한 줄로 유지됩니다. 다만 이 속성만 단독으로 쓰면 텍스트가 컨테이너 너비를 넘어서 화면 밖으로 삐져나갈 수 있어서, overflow 설정과 함께 사용하는 것이 일반적입니다.
white-space 속성 값별 동작 방식 비교
white-space는 줄바꿈과 공백 처리 방식을 함께 제어합니다. 각 값이 실제로 어떻게 동작하는지 비교해 보겠습니다.
| 속성 값 | 줄바꿈 | 공백 처리 | 주요 용도 |
|---|---|---|---|
| normal | 자동 줄바꿈 | 연속 공백 압축 | 기본값 |
| nowrap | 줄바꿈 금지 | 연속 공백 유지 | 한 줄 텍스트 고정 |
| pre | 줄바꿈 유지 | 공백 유지 | <pre> 태그와 동일 |
| pre-wrap | 자동 줄바꿈 | 공백 유지 | 공백 유지 + 화면 너비 대응 |
| pre-line | 자동 줄바꿈 | 공백 압축 | 엔터 줄바꿈만 유지 |
기본값인 normal은 텍스트가 컨테이너 가로 영역을 넘어가면 자동으로 줄바꿈됩니다. nowrap은 이 자동 줄바꿈을 막고 모든 텍스트를 한 줄로 강제합니다. pre는 공백과 엔터를 그대로 보존하면서 줄바꿈을 유지하고, pre-wrap은 공백을 유지하면서도 화면 너비에 맞춰 자동 줄바꿈이 일어납니다. pre-line은 엔터로 인한 줄바꿈만 유지하고 공백은 압축합니다.
nowrap 적용 시 넘침 문제 해결하기
white-space: nowrap;만 적용하면 텍스트가 컨테이너 경계를 무시하고 계속 옆으로 늘어납니다. 가로 200px인 div 안에 긴 문장이 있다면, 텍스트가 박스를 벗어나 화면 밖으로 삐져나가는데, 모바일처럼 화면 폭이 좁을수록 문제가 두드러집니다. 그래서 nowrap을 쓸 때는 반드시 overflow 설정을 함께 지정해야 합니다.
.text-box {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
이렇게 세 속성을 함께 적용하면 텍스트는 한 줄로 유지되고, 박스 너비를 넘어가는 부분은 숨겨지며 말줄임표(...)로 표시됩니다. 사용자 입장에서는 "내용이 더 있다"는 힌트를 얻을 수 있어서 UX 측면에서도 좋습니다. 이 패턴은 뉴스 기사 목록, 상품명, 파일명, 공지사항 제목처럼 길이가 제각각인 텍스트를 일관된 높이로 보여줄 때 자주 사용합니다.
text-overflow: ellipsis는 overflow: hidden과 white-space: nowrap이 함께 적용된 상태에서만 동작합니다. 세 조건 중 하나라도 빠지면 말줄임표가 표시되지 않습니다. 그리고 해당 요소에 display: block 또는 inline-block이 적용되어 있어야 정상적으로 동작합니다.
실무에서 자주 쓰는 nowrap 활용 패턴
실무에서는 white-space: nowrap이 특정 UI 구성 요소에서 거의 필수적으로 사용됩니다. 대표적인 세 가지 상황을 살펴보겠습니다.
내비게이션 메뉴는 메뉴 항목이 두 줄로 넘어가면 헤더 높이가 들쭉날쭉해지고 전체 레이아웃이 흔들립니다. 메뉴 텍스트에 nowrap을 적용하면 고정된 한 줄로 유지되고, max-width와 overflow: hidden을 함께 쓰면 일정 너비 이상 넘어갈 때 말줄임 처리가 됩니다.
버튼과 라벨은 텍스트가 줄바꿈되면 버튼 크기가 제각각이 되어 디자인이 무너집니다. 짧은 문구를 담는 액션 버튼은 nowrap을 기본으로 적용하는 것이 안전합니다. 다만 버튼 가로폭이 지나치게 좁으면 텍스트가 보이지 않을 수 있으니 min-width를 함께 설정하는 것이 좋습니다.
테이블의 숫자·금액 데이터는 엑셀처럼 고정 폭 테이블을 만들 때 숫자가 줄바꿈되면 정렬이 깨지고 가독성이 떨어집니다. 특히 퍼센트나 통화 단위가 포함된 데이터는 nowrap을 걸어 한 줄로 유지하는 것이 일반적입니다. 이 경우 text-align: right를 함께 적용하면 숫자 정렬이 더 깔끔해집니다.
| 활용 영역 | nowrap 적용 효과 | 함께 쓰는 속성 |
|---|---|---|
| 내비게이션 | 메뉴 한 줄 고정 | max-width, overflow |
| 버튼 | 크기 일관성 유지 | min-width |
| 테이블 | 숫자 정렬 유지 | text-align |
모바일에서 nowrap 사용 시 주의할 점
white-space: nowrap은 데스크톱 환경에서는 문제없이 동작하지만, 모바일에서는 화면 폭이 좁아 텍스트가 지나치게 잘릴 수 있습니다. 화면이 좁을수록 넘침이 두드러지기 때문에, nowrap을 적용할 때는 항상 반응형 대응까지 고려해야 합니다.
.text-box {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 768px) {
.text-box {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
}
이렇게 미디어 쿼리를 활용하면 모바일에서는 텍스트가 자연스럽게 줄바꿈되고, 데스크톱에서는 한 줄로 고정됩니다. 모바일 사용자가 텍스트를 읽기 어려울 정도로 잘리는 상황을 방지하려면, nowrap을 쓸 때는 항상 반응형 대응까지 고려하는 것이 좋습니다.
white-space 관련 자주 묻는 질문
Q. div 안의 텍스트 줄바꿈을 막으려면 어떻게 하나요?
white-space: nowrap;을 적용하면 됩니다. 다만 div가 block 요소이기 때문에 텍스트가 한 줄 이상일 때는 가로폭 설정을 같이 해줘야 합니다. 넘침을 방지하려면 overflow: hidden도 함께 지정하세요.
Q. text-overflow ellipsis를 썼는데 말줄임표가 안 나타나요.
text-overflow: ellipsis는 overflow: hidden과 white-space: nowrap이 함께 적용된 상태에서만 동작합니다. 세 조건 중 하나라도 빠지면 말줄임표가 표시되지 않습니다. 해당 요소에 display: block 또는 inline-block이 적용되어 있는지도 확인해 보세요.
Q. 한글도 줄바꿈 없이 표시되나요?
네, 영문뿐 아니라 한글도 정상적으로 줄바꿈 없이 표시됩니다. 한글은 띄어쓰기 단위로 줄바꿈이 발생하는데, nowrap을 걸면 모든 공백이 무시되고 텍스트 전체가 하나의 연속된 줄로 처리됩니다. 다만 조합형 자모가 잘리면 폰트에 따라 어색해질 수 있으니 주의가 필요합니다.
Q. white-space normal과 nowrap의 차이는 무엇인가요?
normal은 기본값으로 텍스트가 컨테이너 너비를 넘어가면 자동으로 줄바꿈됩니다. nowrap은 이 자동 줄바꿈을 막고 모든 텍스트를 한 줄로 강제합니다. 공백 처리 방식도 달라서, normal은 연속된 공백을 하나로 합치지만 nowrap은 공백을 유지한 채 줄바꿈만 방지합니다.