웹 페이지를 만들다 보면 요소 안의 텍스트가 화면 너비에 따라 자동으로 줄 바꿈되는 것을 막고 싶은 경우가 있습니다. 이럴 때 CSS의 white-space 속성을 사용하면 됩니다.
white-space: nowrap 사용법
white-space 속성에 nowrap 값을 지정하면, 해당 요소 내부의 텍스트가 부모 요소의 너비를 벗어나더라도 줄 바꿈되지 않고 한 줄로 이어져 표시됩니다.
아래 예제 코드를 실행하면 p 태그 안의 긴 텍스트가 줄 바꿈 없이 한 줄로 출력되는 것을 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>
This is demo text. This is demo text.
This is demo text. This is demo text.
This is demo text. This is demo text.
This is some text. This is demo text.
</p>
</body>
</html>참고: white-space 속성의 주요 값
- normal: 기본값으로, 연속된 공백을 하나로 합치고 필요할 때 자동으로 줄을 바꿉니다.
- nowrap: 공백은 합쳐지지만 텍스트가 줄 바꿈되지 않으며, <br> 태그가 있을 때만 줄이 바뀝니다.
- pre: HTML 소스에 입력된 공백과 줄 바꿈을 그대로 유지합니다.
- pre-wrap: 공백과 줄 바꿈을 유지하면서도 필요 시 자동으로 줄을 바꿉니다.
텍스트가 컨테이너를 벗어나는 경우가 많다면 overflow 속성과 함께 사용해 가로 스크롤을 허용하거나 내용을 숨기는 방식으로 처리하는 것이 좋습니다.